@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-charts/WakaSparkline.es.js

@@ -0,0 +1,170 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import t from "./hooks/useRechartsLoader.es.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-charts/WakaSparkline.tsx
+var a = n.forwardRef(({ data: a, type: s = "line", width: c = 100, height: l = 30, color: u = "hsl(var(--chart-1))", fillColor: d, fillOpacity: f = .3, showMinMax: p = !1, showValue: m = !1, className: h, animation: g = !0 }, _) => {
+	let { components: v, loading: y, isAvailable: b } = t(), x = n.useMemo(() => a.map((e, t) => ({
+		index: t,
+		value: e
+	})), [a]), { min: S, max: C, current: w } = n.useMemo(() => {
+		let e = a.filter((e) => typeof e == "number" && !isNaN(e));
+		return {
+			min: Math.min(...e),
+			max: Math.max(...e),
+			current: e[e.length - 1]
+		};
+	}, [a]);
+	if (y) return /* @__PURE__ */ r("div", {
+		ref: _,
+		className: e("inline-flex items-center gap-2", h),
+		children: /* @__PURE__ */ r("div", {
+			className: "bg-muted animate-pulse rounded",
+			style: {
+				width: c,
+				height: l
+			}
+		})
+	});
+	if (!b || !v) return /* @__PURE__ */ i("div", {
+		ref: _,
+		className: e("inline-flex items-center gap-2", h),
+		children: [/* @__PURE__ */ r(o, {
+			data: a,
+			width: c,
+			height: l,
+			color: u,
+			type: s,
+			fillColor: d,
+			fillOpacity: f
+		}), m && /* @__PURE__ */ r("span", {
+			className: "text-sm font-medium",
+			children: w
+		})]
+	});
+	let { ResponsiveContainer: T, LineChart: E, BarChart: D, AreaChart: O, Line: k, Bar: A, Area: j } = v;
+	return /* @__PURE__ */ i("div", {
+		ref: _,
+		className: e("inline-flex items-center gap-2", h),
+		children: [
+			/* @__PURE__ */ r("div", {
+				style: {
+					width: c,
+					height: l
+				},
+				children: /* @__PURE__ */ r(T, {
+					width: "100%",
+					height: "100%",
+					children: s === "bar" ? /* @__PURE__ */ r(D, {
+						data: x,
+						children: /* @__PURE__ */ r(A, {
+							dataKey: "value",
+							fill: u,
+							radius: 1,
+							isAnimationActive: g
+						})
+					}) : s === "area" ? /* @__PURE__ */ i(O, {
+						data: x,
+						children: [/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ i("linearGradient", {
+							id: `sparkline-gradient-${u.replace(/[^a-z0-9]/gi, "")}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ r("stop", {
+								offset: "5%",
+								stopColor: d || u,
+								stopOpacity: .8
+							}), /* @__PURE__ */ r("stop", {
+								offset: "95%",
+								stopColor: d || u,
+								stopOpacity: .1
+							})]
+						}) }), /* @__PURE__ */ r(j, {
+							type: "monotone",
+							dataKey: "value",
+							stroke: u,
+							fill: `url(#sparkline-gradient-${u.replace(/[^a-z0-9]/gi, "")})`,
+							fillOpacity: f,
+							strokeWidth: 1.5,
+							dot: !1,
+							isAnimationActive: g
+						})]
+					}) : /* @__PURE__ */ r(E, {
+						data: x,
+						children: /* @__PURE__ */ r(k, {
+							type: "monotone",
+							dataKey: "value",
+							stroke: u,
+							strokeWidth: 1.5,
+							dot: !1,
+							isAnimationActive: g
+						})
+					})
+				})
+			}),
+			p && /* @__PURE__ */ i("div", {
+				className: "flex flex-col text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ i("span", { children: ["↑ ", C] }), /* @__PURE__ */ i("span", { children: ["↓ ", S] })]
+			}),
+			m && /* @__PURE__ */ r("span", {
+				className: "text-sm font-medium",
+				children: w
+			})
+		]
+	});
+});
+a.displayName = "WakaSparkline";
+function o({ data: e, width: t, height: n, color: a, type: o, fillColor: s, fillOpacity: c }) {
+	let l = t - 4, u = n - 4, d = Math.min(...e), f = Math.max(...e) - d || 1, p = e.map((t, n) => ({
+		x: 2 + n / (e.length - 1 || 1) * l,
+		y: 2 + u - (t - d) / f * u,
+		value: t
+	}));
+	if (o === "bar") {
+		let i = l / e.length - 1;
+		return /* @__PURE__ */ r("svg", {
+			width: t,
+			height: n,
+			children: e.map((e, t) => {
+				let n = (e - d) / f * u;
+				return /* @__PURE__ */ r("rect", {
+					x: 2 + t * (i + 1),
+					y: 2 + u - n,
+					width: i,
+					height: n,
+					fill: a,
+					rx: 1
+				}, t);
+			})
+		});
+	}
+	let m = p.map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" ");
+	return o === "area" ? /* @__PURE__ */ i("svg", {
+		width: t,
+		height: n,
+		children: [/* @__PURE__ */ r("path", {
+			d: `${m} L ${p[p.length - 1].x} ${n - 2} L 2 ${n - 2} Z`,
+			fill: s || a,
+			fillOpacity: c
+		}), /* @__PURE__ */ r("path", {
+			d: m,
+			fill: "none",
+			stroke: a,
+			strokeWidth: 1.5
+		})]
+	}) : /* @__PURE__ */ r("svg", {
+		width: t,
+		height: n,
+		children: /* @__PURE__ */ r("path", {
+			d: m,
+			fill: "none",
+			stroke: a,
+			strokeWidth: 1.5
+		})
+	});
+}
+//#endregion
+export { a as WakaSparkline, a as default };

package/dist/components/waka-charts/dataTableHelpers.cjs.js

@@ -0,0 +1 @@
+"use client";function e(e){let{accessorKey:t,header:n=String(t),chartType:r=`sparkline`,width:i=100,height:a=24,color:o,showValue:s=!1,valueFormatter:c}=e;return{accessorKey:t,header:n,size:i+(s?60:0),enableSorting:!1,enableColumnFilter:!1,cell:e=>{let t=e.getValue(),n=[];return Array.isArray(t)&&(typeof t[0]==`number`?n=t:typeof t[0]==`object`&&t[0]!==null&&(n=t.map(e=>{let t=e.value??Object.values(e).find(e=>typeof e==`number`);return typeof t==`number`?t:0}))),{type:`chart`,chartType:r,data:n,width:i,height:a,color:o,showTrend:!0,valueFormatter:c}},meta:{isChartColumn:!0,chartConfig:e}}}var t={cell:e=>{if(!Array.isArray(e))return null;let t=[];return typeof e[0]==`number`?t=e:typeof e[0]==`object`&&e[0]!==null&&(t=e.map(e=>{let t=e.value??Object.values(e).find(e=>typeof e==`number`);return typeof t==`number`?t:0})),{type:`sparkline`,data:t}},size:100,enableSorting:!1,enableFiltering:!1};exports.createChartColumn=e,exports.default=e,exports.sparklineTemplate=t;

package/dist/components/waka-charts/dataTableHelpers.d.ts

@@ -29,7 +29,7 @@ export declare const sparklineTemplate: {
     cell: (value: unknown) => {
         type: string;
         data: number[];
-    };
+    } | null;
     size: number;
     enableSorting: boolean;
     enableFiltering: boolean;

package/dist/components/waka-charts/dataTableHelpers.es.js

@@ -0,0 +1,50 @@
+"use client";
+//#region src/components/waka-charts/dataTableHelpers.ts
+function e(e) {
+	let { accessorKey: t, header: n = String(t), chartType: r = "sparkline", width: i = 100, height: a = 24, color: o, showValue: s = !1, valueFormatter: c } = e;
+	return {
+		accessorKey: t,
+		header: n,
+		size: i + (s ? 60 : 0),
+		enableSorting: !1,
+		enableColumnFilter: !1,
+		cell: (e) => {
+			let t = e.getValue(), n = [];
+			return Array.isArray(t) && (typeof t[0] == "number" ? n = t : typeof t[0] == "object" && t[0] !== null && (n = t.map((e) => {
+				let t = e.value ?? Object.values(e).find((e) => typeof e == "number");
+				return typeof t == "number" ? t : 0;
+			}))), {
+				type: "chart",
+				chartType: r,
+				data: n,
+				width: i,
+				height: a,
+				color: o,
+				showTrend: !0,
+				valueFormatter: c
+			};
+		},
+		meta: {
+			isChartColumn: !0,
+			chartConfig: e
+		}
+	};
+}
+var t = {
+	cell: (e) => {
+		if (!Array.isArray(e)) return null;
+		let t = [];
+		return typeof e[0] == "number" ? t = e : typeof e[0] == "object" && e[0] !== null && (t = e.map((e) => {
+			let t = e.value ?? Object.values(e).find((e) => typeof e == "number");
+			return typeof t == "number" ? t : 0;
+		})), {
+			type: "sparkline",
+			data: t
+		};
+	},
+	size: 100,
+	enableSorting: !1,
+	enableFiltering: !1
+};
+//#endregion
+export { e as createChartColumn, e as default, t as sparklineTemplate };

package/dist/components/waka-charts/hooks/useChartTheme.cjs.js

@@ -0,0 +1 @@
+"use client";let e=require("react");var t={colors:[`hsl(var(--chart-1, 220 70% 50%))`,`hsl(var(--chart-2, 160 60% 45%))`,`hsl(var(--chart-3, 30 80% 55%))`,`hsl(var(--chart-4, 280 65% 60%))`,`hsl(var(--chart-5, 340 75% 55%))`],gridColor:`hsl(var(--border, 220 13% 91%))`,axisColor:`hsl(var(--muted-foreground, 220 9% 46%))`,textColor:`hsl(var(--foreground, 224 71% 4%))`,tooltipBackground:`hsl(var(--popover, 0 0% 100%))`,tooltipText:`hsl(var(--popover-foreground, 224 71% 4%))`,tooltipBorder:`hsl(var(--border, 220 13% 91%))`,fontFamily:`inherit`};function n(n,r=`default`){let i=(0,e.useMemo)(()=>({colors:n?.colors??t.colors,gridColor:n?.gridColor??t.gridColor,axisColor:n?.axisColor??t.axisColor,textColor:n?.textColor??t.textColor,tooltipBackground:n?.tooltipBackground??t.tooltipBackground,tooltipText:n?.tooltipText??t.tooltipText,tooltipBorder:n?.tooltipBorder??t.tooltipBorder,fontFamily:n?.fontFamily??t.fontFamily}),[n]);return{theme:i,getColor:(0,e.useMemo)(()=>e=>i.colors[e%i.colors.length],[i.colors]),tooltipStyles:(0,e.useMemo)(()=>({contentStyle:{backgroundColor:i.tooltipBackground,color:i.tooltipText,border:`1px solid ${i.tooltipBorder}`,borderRadius:`var(--radius, 0.5rem)`,padding:`8px 12px`,boxShadow:`0 2px 4px rgba(0,0,0,0.1)`,fontFamily:i.fontFamily},wrapperStyle:{outline:`none`},itemStyle:{color:i.tooltipText,padding:`2px 0`},labelStyle:{color:i.textColor,fontWeight:600,marginBottom:`4px`}}),[i]),containerClasses:(0,e.useMemo)(()=>{let e=`relative`;switch(r){case`gradient`:return`${e} bg-gradient-to-br from-background to-muted/20`;case`outline`:return`${e} border border-border rounded-lg p-4`;case`glass`:return`${e} bg-background/50 backdrop-blur-sm border border-border/50 rounded-lg p-4`;default:return e}},[r])}}exports.default=n,exports.useChartTheme=n;

package/dist/components/waka-charts/hooks/useChartTheme.es.js

@@ -0,0 +1,67 @@
+"use client";
+import { useMemo as e } from "react";
+//#region src/components/waka-charts/hooks/useChartTheme.ts
+var t = {
+	colors: [
+		"hsl(var(--chart-1, 220 70% 50%))",
+		"hsl(var(--chart-2, 160 60% 45%))",
+		"hsl(var(--chart-3, 30 80% 55%))",
+		"hsl(var(--chart-4, 280 65% 60%))",
+		"hsl(var(--chart-5, 340 75% 55%))"
+	],
+	gridColor: "hsl(var(--border, 220 13% 91%))",
+	axisColor: "hsl(var(--muted-foreground, 220 9% 46%))",
+	textColor: "hsl(var(--foreground, 224 71% 4%))",
+	tooltipBackground: "hsl(var(--popover, 0 0% 100%))",
+	tooltipText: "hsl(var(--popover-foreground, 224 71% 4%))",
+	tooltipBorder: "hsl(var(--border, 220 13% 91%))",
+	fontFamily: "inherit"
+};
+function n(n, r = "default") {
+	let i = e(() => ({
+		colors: n?.colors ?? t.colors,
+		gridColor: n?.gridColor ?? t.gridColor,
+		axisColor: n?.axisColor ?? t.axisColor,
+		textColor: n?.textColor ?? t.textColor,
+		tooltipBackground: n?.tooltipBackground ?? t.tooltipBackground,
+		tooltipText: n?.tooltipText ?? t.tooltipText,
+		tooltipBorder: n?.tooltipBorder ?? t.tooltipBorder,
+		fontFamily: n?.fontFamily ?? t.fontFamily
+	}), [n]);
+	return {
+		theme: i,
+		getColor: e(() => (e) => i.colors[e % i.colors.length], [i.colors]),
+		tooltipStyles: e(() => ({
+			contentStyle: {
+				backgroundColor: i.tooltipBackground,
+				color: i.tooltipText,
+				border: `1px solid ${i.tooltipBorder}`,
+				borderRadius: "var(--radius, 0.5rem)",
+				padding: "8px 12px",
+				boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+				fontFamily: i.fontFamily
+			},
+			wrapperStyle: { outline: "none" },
+			itemStyle: {
+				color: i.tooltipText,
+				padding: "2px 0"
+			},
+			labelStyle: {
+				color: i.textColor,
+				fontWeight: 600,
+				marginBottom: "4px"
+			}
+		}), [i]),
+		containerClasses: e(() => {
+			let e = "relative";
+			switch (r) {
+				case "gradient": return `${e} bg-gradient-to-br from-background to-muted/20`;
+				case "outline": return `${e} border border-border rounded-lg p-4`;
+				case "glass": return `${e} bg-background/50 backdrop-blur-sm border border-border/50 rounded-lg p-4`;
+				default: return e;
+			}
+		}, [r])
+	};
+}
+//#endregion
+export { n as default, n as useChartTheme };

package/dist/components/waka-charts/hooks/useRechartsLoader.cjs.js

@@ -0,0 +1 @@
+"use client";let e=require("react");function t(){let[t,n]=(0,e.useState)(null),[r,i]=(0,e.useState)(!0),[a,o]=(0,e.useState)(null);return(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t=await import(`recharts`);e&&(n({ResponsiveContainer:t.ResponsiveContainer,BarChart:t.BarChart,LineChart:t.LineChart,AreaChart:t.AreaChart,PieChart:t.PieChart,Bar:t.Bar,Line:t.Line,Area:t.Area,Pie:t.Pie,Cell:t.Cell,XAxis:t.XAxis,YAxis:t.YAxis,CartesianGrid:t.CartesianGrid,Tooltip:t.Tooltip,Legend:t.Legend,defs:`defs`,linearGradient:`linearGradient`,stop:`stop`}),i(!1))}catch(t){e&&(o(t instanceof Error?t:Error(`Failed to load Recharts`)),i(!1))}})(),()=>{e=!1}},[]),{components:t,loading:r,error:a,isAvailable:!r&&!a&&t!==null}}exports.default=t,exports.useRechartsLoader=t;

package/dist/components/waka-charts/hooks/useRechartsLoader.es.js

@@ -0,0 +1,45 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/components/waka-charts/hooks/useRechartsLoader.ts
+function n() {
+	let [n, r] = t(null), [i, a] = t(!0), [o, s] = t(null);
+	return e(() => {
+		let e = !0;
+		return (async () => {
+			try {
+				let t = await import("recharts");
+				e && (r({
+					ResponsiveContainer: t.ResponsiveContainer,
+					BarChart: t.BarChart,
+					LineChart: t.LineChart,
+					AreaChart: t.AreaChart,
+					PieChart: t.PieChart,
+					Bar: t.Bar,
+					Line: t.Line,
+					Area: t.Area,
+					Pie: t.Pie,
+					Cell: t.Cell,
+					XAxis: t.XAxis,
+					YAxis: t.YAxis,
+					CartesianGrid: t.CartesianGrid,
+					Tooltip: t.Tooltip,
+					Legend: t.Legend,
+					defs: "defs",
+					linearGradient: "linearGradient",
+					stop: "stop"
+				}), a(!1));
+			} catch (t) {
+				e && (s(t instanceof Error ? t : /* @__PURE__ */ Error("Failed to load Recharts")), a(!1));
+			}
+		})(), () => {
+			e = !1;
+		};
+	}, []), {
+		components: n,
+		loading: i,
+		error: o,
+		isAvailable: !i && !o && n !== null
+	};
+}
+//#endregion
+export { n as default, n as useRechartsLoader };

package/dist/components/waka-charts/types.cjs.js

@@ -0,0 +1 @@
+"use client";var e=[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`],t={sm:{width:`100%`,height:150},md:{width:`100%`,height:250},lg:{width:`100%`,height:350},xl:{width:`100%`,height:450},auto:{width:`100%`,height:300}};exports.CHART_SIZE_MAP=t,exports.DEFAULT_CHART_COLORS=e;

package/dist/components/waka-charts/types.es.js

@@ -0,0 +1,32 @@
+"use client";
+//#region src/components/waka-charts/types.ts
+var e = [
+	"hsl(var(--chart-1))",
+	"hsl(var(--chart-2))",
+	"hsl(var(--chart-3))",
+	"hsl(var(--chart-4))",
+	"hsl(var(--chart-5))"
+], t = {
+	sm: {
+		width: "100%",
+		height: 150
+	},
+	md: {
+		width: "100%",
+		height: 250
+	},
+	lg: {
+		width: "100%",
+		height: 350
+	},
+	xl: {
+		width: "100%",
+		height: 450
+	},
+	auto: {
+		width: "100%",
+		height: 300
+	}
+};
+//#endregion
+export { t as CHART_SIZE_MAP, e as DEFAULT_CHART_COLORS };

package/dist/components/waka-chat-bubble/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("class-variance-authority"),a=require("react/jsx-runtime");var o=(0,i.cva)(`relative rounded-2xl px-4 py-2.5 max-w-[85%] break-words transition-all`,{variants:{variant:{default:``,minimal:`shadow-none`,elevated:`shadow-lg`},isSent:{true:`bg-primary text-primary-foreground ml-auto rounded-br-md`,false:`bg-muted text-foreground mr-auto rounded-bl-md`}},defaultVariants:{variant:`default`,isSent:!1}}),s=(0,i.cva)(`h-3.5 w-3.5`,{variants:{status:{sending:`text-muted-foreground animate-pulse`,sent:`text-muted-foreground`,delivered:`text-muted-foreground`,read:`text-blue-500`,failed:`text-destructive`}}});function c(e,t){let n=typeof e==`string`?new Date(e):e;if(t===`relative`){let e=new Date().getTime()-n.getTime(),t=Math.floor(e/6e4),r=Math.floor(e/36e5),i=Math.floor(e/864e5);return t<1?`Just now`:t<60?`${t}m ago`:r<24?`${r}h ago`:i<7?`${i}d ago`:n.toLocaleDateString()}return t===`datetime`?n.toLocaleString(void 0,{month:`short`,day:`numeric`,hour:`numeric`,minute:`2-digit`}):n.toLocaleTimeString(void 0,{hour:`numeric`,minute:`2-digit`})}function l(e){let t=e.trim();return/^[\p{Emoji}\p{Emoji_Modifier}\p{Emoji_Component}\p{Emoji_Modifier_Base}\p{Emoji_Presentation}\s]+$/u.test(t)&&t.length<=12}function u(e){return e?e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(1)} KB`:`${(e/(1024*1024)).toFixed(1)} MB`:``}function d({user:e,size:n=`default`,className:r}){return(0,a.jsx)(`div`,{className:t.cn(`flex-shrink-0 rounded-full overflow-hidden bg-muted flex items-center justify-center`,n===`sm`?`h-6 w-6 text-xs`:`h-8 w-8 text-sm`,r),children:e?.avatar?(0,a.jsx)(`img`,{src:e.avatar,alt:e.name,className:`h-full w-full object-cover`}):(0,a.jsx)(`span`,{className:`font-medium text-muted-foreground`,children:e?.initials??e?.name?.slice(0,2).toUpperCase()??`?`})})}function f({status:e,readReceipt:n}){if(e===`sending`)return(0,a.jsx)(r.Clock,{className:t.cn(s({status:`sending`}))});if(e===`failed`)return(0,a.jsx)(r.AlertCircle,{className:t.cn(s({status:`failed`}))});let i=n??(e===`delivered`?`delivered`:`sent`);return i===`read`?(0,a.jsx)(r.CheckCheck,{className:t.cn(s({status:`read`}))}):i===`delivered`?(0,a.jsx)(r.CheckCheck,{className:t.cn(s({status:`delivered`}))}):(0,a.jsx)(r.Check,{className:t.cn(s({status:`sent`}))})}function p({reaction:e,onClick:n,isSent:r}){return(0,a.jsxs)(`button`,{type:`button`,onClick:n,className:t.cn(`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium transition-colors`,e.reacted?`bg-primary/20 text-primary border border-primary/30`:r?`bg-primary-foreground/20 text-primary-foreground/80 hover:bg-primary-foreground/30`:`bg-background border border-border hover:bg-muted`),children:[(0,a.jsx)(`span`,{children:e.emoji}),(0,a.jsx)(`span`,{children:e.count})]})}function m({attachment:e,onClick:n,isSent:i}){return e.type===`image`?(0,a.jsx)(`button`,{type:`button`,onClick:n,className:`relative rounded-lg overflow-hidden max-w-[280px] cursor-pointer hover:opacity-90 transition-opacity`,children:(0,a.jsx)(`img`,{src:e.thumbnail??e.url,alt:e.name,className:`max-h-[200px] object-cover`,style:{width:e.width?Math.min(e.width,280):`auto`}})}):(0,a.jsxs)(`button`,{type:`button`,onClick:n,className:t.cn(`flex items-center gap-3 p-3 rounded-lg transition-colors max-w-[280px]`,i?`bg-primary-foreground/10 hover:bg-primary-foreground/20`:`bg-background/50 hover:bg-background/80`),children:[(0,a.jsx)(`div`,{className:t.cn(`flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center`,i?`bg-primary-foreground/20`:`bg-muted`),children:e.type===`video`?(0,a.jsx)(r.Image,{className:`h-5 w-5`}):(0,a.jsx)(r.FileText,{className:`h-5 w-5`})}),(0,a.jsxs)(`div`,{className:`min-w-0 flex-1 text-left`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium truncate`,children:e.name}),e.size&&(0,a.jsx)(`p`,{className:t.cn(`text-xs`,i?`text-primary-foreground/70`:`text-muted-foreground`),children:u(e.size)})]})]})}function h({preview:e,onClick:n,isSent:r}){return(0,a.jsxs)(`button`,{type:`button`,onClick:n,className:t.cn(`flex flex-col rounded-lg overflow-hidden max-w-[280px] text-left transition-colors`,r?`bg-primary-foreground/10 hover:bg-primary-foreground/20`:`bg-background/50 hover:bg-background/80 border border-border`),children:[e.image&&(0,a.jsx)(`div`,{className:`relative h-32 w-full overflow-hidden`,children:(0,a.jsx)(`img`,{src:e.image,alt:``,className:`h-full w-full object-cover`})}),(0,a.jsxs)(`div`,{className:`p-3`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[e.favicon&&(0,a.jsx)(`img`,{src:e.favicon,alt:``,className:`h-4 w-4`}),e.siteName&&(0,a.jsx)(`span`,{className:t.cn(`text-xs`,r?`text-primary-foreground/70`:`text-muted-foreground`),children:e.siteName})]}),(0,a.jsx)(`p`,{className:`text-sm font-medium line-clamp-2`,children:e.title}),e.description&&(0,a.jsx)(`p`,{className:t.cn(`text-xs mt-1 line-clamp-2`,r?`text-primary-foreground/70`:`text-muted-foreground`),children:e.description})]})]})}function g({onReply:e,onEdit:i,onDelete:o,onAddReaction:s,isSent:c,isOpen:l,onOpenChange:u}){let d=n.useRef(null);return n.useEffect(()=>{function e(e){d.current&&!d.current.contains(e.target)&&u(!1)}if(l)return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[l,u]),(0,a.jsxs)(`div`,{className:`relative`,ref:d,children:[(0,a.jsx)(`button`,{type:`button`,onClick:()=>u(!l),className:t.cn(`p-1.5 rounded-full transition-colors`,c?`hover:bg-primary-foreground/20 text-primary-foreground/70`:`hover:bg-muted text-muted-foreground`),children:(0,a.jsx)(r.MoreVertical,{className:`h-4 w-4`})}),l&&(0,a.jsxs)(`div`,{className:t.cn(`absolute z-50 min-w-[140px] rounded-lg border bg-popover p-1 shadow-lg animate-in fade-in-0 zoom-in-95`,c?`right-0`:`left-0`),children:[s&&(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{s(),u(!1)},className:`flex items-center gap-2 w-full px-3 py-2 text-sm rounded-md hover:bg-muted transition-colors`,children:[(0,a.jsx)(r.Smile,{className:`h-4 w-4`}),`React`]}),e&&(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{e(),u(!1)},className:`flex items-center gap-2 w-full px-3 py-2 text-sm rounded-md hover:bg-muted transition-colors`,children:[(0,a.jsx)(r.Reply,{className:`h-4 w-4`}),`Reply`]}),i&&c&&(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{i(),u(!1)},className:`flex items-center gap-2 w-full px-3 py-2 text-sm rounded-md hover:bg-muted transition-colors`,children:[(0,a.jsx)(r.Pencil,{className:`h-4 w-4`}),`Edit`]}),o&&c&&(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{o(),u(!1)},className:`flex items-center gap-2 w-full px-3 py-2 text-sm rounded-md hover:bg-muted text-destructive transition-colors`,children:[(0,a.jsx)(r.Trash2,{className:`h-4 w-4`}),`Delete`]})]})]})}var _=n.forwardRef(({message:e,isSent:i=!1,sender:s,showAvatar:u=!0,timestamp:_,timestampFormat:v=`time`,status:y=`sent`,readReceipt:b,reactions:x=[],thread:S,isEdited:C=!1,attachments:w=[],linkPreview:T,markdown:E=!1,onAddReaction:D,onToggleReaction:O,onReply:k,onEdit:A,onDelete:j,onRetry:M,onThreadClick:N,onAttachmentClick:P,onLinkPreviewClick:F,showActions:I=!0,emojiPicker:L,quickReactions:R=[`thumbs_up`,`heart`,`laugh`,`wow`,`sad`,`angry`].map(e=>({thumbs_up:`👍`,heart:`❤️`,laugh:`😂`,wow:`😮`,sad:`😢`,angry:`😡`})[e]??`👍`),renderTimestamp:z,maxWidth:B,variant:V,className:H,...U},W)=>{let[G,K]=n.useState(!1),[q,J]=n.useState(!1),[Y,X]=n.useState(!1),[Z,Q]=n.useState(!1),$=l(e),ee=w.length>0,te=e=>E?e.split(/(`[^`]+`)/g).map((e,r)=>{if(e.startsWith("`")&&e.endsWith("`"))return(0,a.jsx)(`code`,{className:t.cn(`px-1.5 py-0.5 rounded text-sm font-mono`,i?`bg-primary-foreground/20`:`bg-muted-foreground/20`),children:e.slice(1,-1)},r);let o=e;return o=e.split(/(\*\*[^*]+\*\*)/g).map((e,t)=>e.startsWith(`**`)&&e.endsWith(`**`)?(0,a.jsx)(`strong`,{children:e.slice(2,-2)},t):e),(0,a.jsx)(n.Fragment,{children:o},r)}):e,ne=e=>{D?.(e),Q(!1)},re=e=>{D?.(e),X(!1)};return(0,a.jsxs)(`div`,{ref:W,className:t.cn(`group flex gap-2 px-2 py-1`,i?`flex-row-reverse`:`flex-row`,H),onMouseEnter:()=>K(!0),onMouseLeave:()=>{K(!1),Q(!1)},...U,children:[u&&!i&&(0,a.jsx)(d,{user:s,className:`mt-auto mb-1`}),(0,a.jsxs)(`div`,{className:t.cn(`flex flex-col`,i?`items-end`:`items-start`),style:{maxWidth:B??`85%`},children:[!i&&s?.name&&(0,a.jsx)(`span`,{className:`text-xs text-muted-foreground mb-1 ml-1`,children:s.name}),(0,a.jsxs)(`div`,{className:t.cn(`relative`,i?`flex flex-row-reverse`:`flex`),children:[I&&G&&(0,a.jsxs)(`div`,{className:t.cn(`flex items-center gap-0.5 mx-1 opacity-0 group-hover:opacity-100 transition-opacity`,i?`flex-row-reverse`:``),children:[D&&(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(`button`,{type:`button`,onClick:()=>Q(!Z),className:`p-1.5 rounded-full hover:bg-muted text-muted-foreground transition-colors`,children:(0,a.jsx)(r.Smile,{className:`h-4 w-4`})}),Z&&(0,a.jsx)(`div`,{className:t.cn(`absolute z-50 flex gap-1 p-1.5 rounded-full bg-popover border shadow-lg animate-in fade-in-0 zoom-in-95`,i?`right-0`:`left-0`,`bottom-full mb-1`),children:R.map(e=>(0,a.jsx)(`button`,{type:`button`,onClick:()=>ne(e),className:`text-lg hover:scale-125 transition-transform p-1`,children:e},e))})]}),k&&(0,a.jsx)(`button`,{type:`button`,onClick:k,className:`p-1.5 rounded-full hover:bg-muted text-muted-foreground transition-colors`,children:(0,a.jsx)(r.Reply,{className:`h-4 w-4`})}),(A||j)&&(0,a.jsx)(g,{onReply:k,onEdit:A,onDelete:j,onAddReaction:D?()=>X(!0):void 0,isSent:i,isOpen:q,onOpenChange:J})]}),(0,a.jsxs)(`div`,{className:t.cn(o({variant:V,isSent:i}),$&&`bg-transparent px-2 py-1 text-4xl`,y===`failed`&&`opacity-70`),children:[ee&&(0,a.jsx)(`div`,{className:`space-y-2 mb-2`,children:w.map(e=>(0,a.jsx)(m,{attachment:e,onClick:()=>P?.(e),isSent:i},e.id))}),T&&(0,a.jsx)(`div`,{className:`mb-2`,children:(0,a.jsx)(h,{preview:T,onClick:()=>F?.(T.url),isSent:i})}),(0,a.jsx)(`p`,{className:t.cn(`whitespace-pre-wrap`,$&&`text-4xl leading-tight`),children:te(e)}),(0,a.jsxs)(`div`,{className:t.cn(`flex items-center gap-1.5 mt-1`,i?`justify-end`:`justify-start`),children:[C&&(0,a.jsx)(`span`,{className:t.cn(`text-[10px]`,i?`text-primary-foreground/60`:`text-muted-foreground`),children:`edited`}),_&&(0,a.jsx)(`span`,{className:t.cn(`text-[10px]`,i?`text-primary-foreground/60`:`text-muted-foreground`),children:z?z(_):c(_,v)}),i&&(0,a.jsx)(f,{status:y,readReceipt:b})]}),y===`failed`&&M&&(0,a.jsxs)(`button`,{type:`button`,onClick:M,className:t.cn(`flex items-center gap-1 mt-2 text-xs font-medium`,i?`text-primary-foreground/80`:`text-destructive`),children:[(0,a.jsx)(r.RefreshCw,{className:`h-3 w-3`}),`Tap to retry`]})]})]}),x.length>0&&(0,a.jsx)(`div`,{className:t.cn(`flex flex-wrap gap-1 mt-1`,i?`justify-end mr-2`:`justify-start ml-2`),children:x.map(e=>(0,a.jsx)(p,{reaction:e,onClick:()=>O?.(e.emoji),isSent:i},e.emoji))}),S&&S.count>0&&(0,a.jsxs)(`button`,{type:`button`,onClick:N,className:t.cn(`flex items-center gap-2 mt-1 px-2 py-1 rounded-lg text-xs transition-colors`,i?`hover:bg-primary/10 text-primary`:`hover:bg-muted text-muted-foreground`),children:[(0,a.jsx)(`div`,{className:`flex -space-x-1`,children:S.participants.slice(0,3).map(e=>(0,a.jsx)(d,{user:e,size:`sm`,className:`ring-2 ring-background`},e.id))}),(0,a.jsxs)(`span`,{children:[S.count,` `,S.count===1?`reply`:`replies`]}),S.lastReply&&(0,a.jsxs)(`span`,{className:`text-muted-foreground truncate max-w-[100px]`,children:[`- `,S.lastReply]})]})]}),Y&&L&&(0,a.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center bg-black/50`,onClick:()=>X(!1),children:(0,a.jsxs)(`div`,{className:`bg-popover rounded-lg shadow-xl p-4`,onClick:e=>e.stopPropagation(),children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between mb-2`,children:[(0,a.jsx)(`span`,{className:`text-sm font-medium`,children:`Add Reaction`}),(0,a.jsx)(`button`,{type:`button`,onClick:()=>X(!1),className:`p-1 rounded hover:bg-muted`,children:(0,a.jsx)(r.X,{className:`h-4 w-4`})})]}),L(re)]})})]})});_.displayName=`WakaChatBubble`;function v({users:e=[],showAvatar:n=!0,className:r,...i}){if(e.length===0)return null;let o=e.length===1?e[0].name:e.length===2?`${e[0].name} and ${e[1].name}`:`${e[0].name} and ${e.length-1} others`;return(0,a.jsxs)(`div`,{className:t.cn(`flex items-end gap-2 px-2 py-1`,r),...i,children:[n&&(0,a.jsx)(d,{user:e[0],className:`mb-1`}),(0,a.jsx)(`div`,{className:`bg-muted rounded-2xl rounded-bl-md px-4 py-3`,children:(0,a.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,a.jsx)(`span`,{className:`w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce`,style:{animationDelay:`0ms`}}),(0,a.jsx)(`span`,{className:`w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce`,style:{animationDelay:`150ms`}}),(0,a.jsx)(`span`,{className:`w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce`,style:{animationDelay:`300ms`}})]})}),(0,a.jsxs)(`span`,{className:`text-xs text-muted-foreground ml-1`,children:[o,` `,e.length===1?`is`:`are`,` typing...`]})]})}function y({date:e,className:n,...r}){let i=typeof e==`string`?new Date(e):e,o=new Date,s=new Date(o);s.setDate(s.getDate()-1);let c;return c=i.toDateString()===o.toDateString()?`Today`:i.toDateString()===s.toDateString()?`Yesterday`:i.toLocaleDateString(void 0,{weekday:`long`,month:`long`,day:`numeric`}),(0,a.jsxs)(`div`,{className:t.cn(`flex items-center justify-center py-4`,n),...r,children:[(0,a.jsx)(`div`,{className:`flex-1 h-px bg-border`}),(0,a.jsx)(`span`,{className:`px-4 text-xs text-muted-foreground font-medium`,children:c}),(0,a.jsx)(`div`,{className:`flex-1 h-px bg-border`})]})}function b({message:e,icon:n,className:r,...i}){return(0,a.jsxs)(`div`,{className:t.cn(`flex items-center justify-center gap-2 py-2 text-xs text-muted-foreground`,r),...i,children:[n,(0,a.jsx)(`span`,{children:e})]})}exports.WakaChatBubble=_,exports.WakaChatDateSeparator=y,exports.WakaChatSystemMessage=b,exports.WakaChatTypingIndicator=v;

package/dist/components/waka-chat-bubble/index.d.ts

@@ -100,10 +100,10 @@ export interface WakaChatBubbleProps extends React.HTMLAttributes<HTMLDivElement
     /** Maximum width of the bubble */
     maxWidth?: string | number;
 }
-declare const bubbleVariants: (props?: {
-    variant?: "default" | "minimal" | "elevated";
-    isSent?: boolean;
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const bubbleVariants: (props?: ({
+    variant?: "default" | "minimal" | "elevated" | null | undefined;
+    isSent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const WakaChatBubble: React.ForwardRefExoticComponent<WakaChatBubbleProps & React.RefAttributes<HTMLDivElement>>;
 export interface WakaChatTypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Users currently typing */
@@ -111,7 +111,7 @@ export interface WakaChatTypingIndicatorProps extends React.HTMLAttributes<HTMLD
     /** Show avatar */
     showAvatar?: boolean;
 }
-export declare function WakaChatTypingIndicator({ users, showAvatar, className, ...props }: WakaChatTypingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaChatTypingIndicator({ users, showAvatar, className, ...props }: WakaChatTypingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export interface WakaChatDateSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Date to display */
     date: Date | string;