@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/chat/core-chat-widget.mjs

@@ -0,0 +1,116 @@
+import { generateId, sendChatMessage } from "../services/chatService.mjs";
+import { ChatPanel } from "./core-chat-panel.mjs";
+import { Sparkles } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/core-chat-widget.tsx
+/** Embedded chat widget for user support and AI-powered conversations. */
+function ChatWidget({ onAddWidget, apiEndpoint, userName }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isMinimized, setIsMinimized] = useState(false);
+	const [messages, setMessages] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape" && isOpen) {
+				setIsOpen(false);
+				setIsMinimized(false);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen]);
+	const handleOpen = useCallback(() => {
+		setIsOpen(true);
+		setIsMinimized(false);
+	}, []);
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+		setIsMinimized(false);
+	}, []);
+	const handleMinimize = useCallback(() => {
+		setIsMinimized(true);
+	}, []);
+	const handleMaximize = useCallback(() => {
+		setIsMinimized(false);
+	}, []);
+	const handleSendMessage = useCallback(async (content) => {
+		const userMessage = {
+			id: generateId(),
+			role: "user",
+			type: "text",
+			content,
+			timestamp: /* @__PURE__ */ new Date()
+		};
+		setMessages((prev) => [...prev, userMessage]);
+		setIsLoading(true);
+		try {
+			const response = await sendChatMessage(content, apiEndpoint);
+			if (response.chart) {
+				const chartMessage = {
+					id: generateId(),
+					role: "assistant",
+					type: "chart",
+					content: response.message,
+					chartData: response.chart,
+					timestamp: /* @__PURE__ */ new Date(),
+					targetTab: response.targetTab
+				};
+				setMessages((prev) => [...prev, chartMessage]);
+			} else {
+				const textMessage = {
+					id: generateId(),
+					role: "assistant",
+					type: "text",
+					content: response.message,
+					timestamp: /* @__PURE__ */ new Date()
+				};
+				setMessages((prev) => [...prev, textMessage]);
+			}
+		} catch (error) {
+			const errorMessage = {
+				id: generateId(),
+				role: "assistant",
+				type: "text",
+				content: "Sorry, I couldn't generate that chart. Please try again.",
+				timestamp: /* @__PURE__ */ new Date()
+			};
+			setMessages((prev) => [...prev, errorMessage]);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [apiEndpoint]);
+	if (!isOpen) return /* @__PURE__ */ jsx("div", {
+		className: "wwc:fixed wwc:bottom-6 wwc:right-6 wwc:z-[9999]",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "ai-assistant-trigger wwc:relative wwc:rounded-full wwc:p-[2px] wwc:bg-gradient-to-r wwc:from-violet-500 wwc:via-pink-500 wwc:via-amber-400 wwc:to-violet-500 wwc:bg-[length:200%_100%] wwc:animate-gradient-x",
+			children: /* @__PURE__ */ jsxs("button", {
+				onClick: handleOpen,
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:px-4 wwc:py-3 wwc:rounded-full wwc:bg-white wwc:text-gray-800 wwc:transition-all wwc:duration-300 wwc:hover:bg-gray-50 wwc:active:scale-95",
+				"aria-label": "Open Core Assistant",
+				children: [/* @__PURE__ */ jsx(Sparkles, {
+					className: "wwc:h-5 wwc:w-5 wwc:text-violet-600",
+					fill: "currentColor"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:font-medium",
+					children: "Core Assistant"
+				})]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(ChatPanel, {
+		messages,
+		isLoading,
+		isMinimized,
+		onClose: handleClose,
+		onMinimize: handleMinimize,
+		onMaximize: handleMaximize,
+		onSendMessage: handleSendMessage,
+		onAddWidget,
+		userName
+	});
+}
+//#endregion
+export { ChatWidget };
+
+//# sourceMappingURL=core-chat-widget.mjs.map

package/dist/chat/core-chat-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-chat-widget.mjs","names":[],"sources":["../../src/chat/core-chat-widget.tsx"],"sourcesContent":["import {Sparkles} from \"lucide-react\";\nimport {useCallback, useEffect, useState} from \"react\";\n\nimport {generateId, sendChatMessage} from \"../services/chatService\";\nimport type {ChartMessage, DashboardWidget, Message, TextMessage} from \"../types/chat\";\nimport {ChatPanel} from \"./core-chat-panel\";\n\ninterface ChatWidgetProps {\n\tonAddWidget?: (widget: DashboardWidget) => void;\n\tapiEndpoint?: string;\n\tuserName?: string;\n}\n\n/** Embedded chat widget for user support and AI-powered conversations. */\nexport function ChatWidget({onAddWidget, apiEndpoint, userName}: ChatWidgetProps) {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [isMinimized, setIsMinimized] = useState(false);\n\tconst [messages, setMessages] = useState<Message[]>([]);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\t// Handle keyboard shortcuts\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && isOpen) {\n\t\t\t\tsetIsOpen(false);\n\t\t\t\tsetIsMinimized(false);\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => window.removeEventListener(\"keydown\", handleKeyDown);\n\t}, [isOpen]);\n\n\tconst handleOpen = useCallback(() => {\n\t\tsetIsOpen(true);\n\t\tsetIsMinimized(false);\n\t}, []);\n\n\tconst handleClose = useCallback(() => {\n\t\tsetIsOpen(false);\n\t\tsetIsMinimized(false);\n\t}, []);\n\n\tconst handleMinimize = useCallback(() => {\n\t\tsetIsMinimized(true);\n\t}, []);\n\n\tconst handleMaximize = useCallback(() => {\n\t\tsetIsMinimized(false);\n\t}, []);\n\n\tconst handleSendMessage = useCallback(\n\t\tasync (content: string) => {\n\t\t\t// Add user message\n\t\t\tconst userMessage: TextMessage = {\n\t\t\t\tid: generateId(),\n\t\t\t\trole: \"user\",\n\t\t\t\ttype: \"text\",\n\t\t\t\tcontent,\n\t\t\t\ttimestamp: new Date(),\n\t\t\t};\n\t\t\tsetMessages((prev) => [...prev, userMessage]);\n\t\t\tsetIsLoading(true);\n\n\t\t\ttry {\n\t\t\t\t// Get AI response\n\t\t\t\tconst response = await sendChatMessage(content, apiEndpoint);\n\n\t\t\t\t// Add assistant message\n\t\t\t\tif (response.chart) {\n\t\t\t\t\tconst chartMessage: ChartMessage = {\n\t\t\t\t\t\tid: generateId(),\n\t\t\t\t\t\trole: \"assistant\",\n\t\t\t\t\t\ttype: \"chart\",\n\t\t\t\t\t\tcontent: response.message,\n\t\t\t\t\t\tchartData: response.chart,\n\t\t\t\t\t\ttimestamp: new Date(),\n\t\t\t\t\t\ttargetTab: response.targetTab,\n\t\t\t\t\t};\n\t\t\t\t\tsetMessages((prev) => [...prev, chartMessage]);\n\t\t\t\t} else {\n\t\t\t\t\tconst textMessage: TextMessage = {\n\t\t\t\t\t\tid: generateId(),\n\t\t\t\t\t\trole: \"assistant\",\n\t\t\t\t\t\ttype: \"text\",\n\t\t\t\t\t\tcontent: response.message,\n\t\t\t\t\t\ttimestamp: new Date(),\n\t\t\t\t\t};\n\t\t\t\t\tsetMessages((prev) => [...prev, textMessage]);\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t// Add error message\n\t\t\t\tconst errorMessage: TextMessage = {\n\t\t\t\t\tid: generateId(),\n\t\t\t\t\trole: \"assistant\",\n\t\t\t\t\ttype: \"text\",\n\t\t\t\t\tcontent: \"Sorry, I couldn't generate that chart. Please try again.\",\n\t\t\t\t\ttimestamp: new Date(),\n\t\t\t\t};\n\t\t\t\tsetMessages((prev) => [...prev, errorMessage]);\n\t\t\t} finally {\n\t\t\t\tsetIsLoading(false);\n\t\t\t}\n\t\t},\n\t\t[apiEndpoint],\n\t);\n\n\t// Floating button when closed\n\tif (!isOpen) {\n\t\treturn (\n\t\t\t<div className=\"wwc:fixed wwc:bottom-6 wwc:right-6 wwc:z-[9999]\">\n\t\t\t\t{/* Animated gradient border wrapper */}\n\t\t\t\t<div className=\"ai-assistant-trigger wwc:relative wwc:rounded-full wwc:p-[2px] wwc:bg-gradient-to-r wwc:from-violet-500 wwc:via-pink-500 wwc:via-amber-400 wwc:to-violet-500 wwc:bg-[length:200%_100%] wwc:animate-gradient-x\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={handleOpen}\n\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:gap-2 wwc:px-4 wwc:py-3 wwc:rounded-full wwc:bg-white wwc:text-gray-800 wwc:transition-all wwc:duration-300 wwc:hover:bg-gray-50 wwc:active:scale-95\"\n\t\t\t\t\t\taria-label=\"Open Core Assistant\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Sparkles className=\"wwc:h-5 wwc:w-5 wwc:text-violet-600\" fill=\"currentColor\" />\n\t\t\t\t\t\t<span className=\"wwc:text-sm wwc:font-medium\">Core Assistant</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Chat panel when open\n\treturn (\n\t\t<ChatPanel\n\t\t\tmessages={messages}\n\t\t\tisLoading={isLoading}\n\t\t\tisMinimized={isMinimized}\n\t\t\tonClose={handleClose}\n\t\t\tonMinimize={handleMinimize}\n\t\t\tonMaximize={handleMaximize}\n\t\t\tonSendMessage={handleSendMessage}\n\t\t\tonAddWidget={onAddWidget}\n\t\t\tuserName={userName}\n\t\t/>\n\t);\n}\n\n// Re-export types for convenience\nexport type {DashboardWidget, Message} from \"../types/chat\";\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,EAAC,aAAa,aAAa,YAA4B;CACjF,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,UAAU,eAAe,SAAoB,CAAC,CAAC;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAGhD,gBAAgB;EACf,MAAM,iBAAiB,MAAqB;GAC3C,IAAI,EAAE,QAAQ,YAAY,QAAQ;IACjC,UAAU,KAAK;IACf,eAAe,KAAK;GACrB;EACD;EAEA,OAAO,iBAAiB,WAAW,aAAa;EAChD,aAAa,OAAO,oBAAoB,WAAW,aAAa;CACjE,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,aAAa,kBAAkB;EACpC,UAAU,IAAI;EACd,eAAe,KAAK;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACrC,UAAU,KAAK;EACf,eAAe,KAAK;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,kBAAkB;EACxC,eAAe,IAAI;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,kBAAkB;EACxC,eAAe,KAAK;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB,YACzB,OAAO,YAAoB;EAE1B,MAAM,cAA2B;GAChC,IAAI,WAAW;GACf,MAAM;GACN,MAAM;GACN;GACA,2BAAW,IAAI,KAAK;EACrB;EACA,aAAa,SAAS,CAAC,GAAG,MAAM,WAAW,CAAC;EAC5C,aAAa,IAAI;EAEjB,IAAI;GAEH,MAAM,WAAW,MAAM,gBAAgB,SAAS,WAAW;GAG3D,IAAI,SAAS,OAAO;IACnB,MAAM,eAA6B;KAClC,IAAI,WAAW;KACf,MAAM;KACN,MAAM;KACN,SAAS,SAAS;KAClB,WAAW,SAAS;KACpB,2BAAW,IAAI,KAAK;KACpB,WAAW,SAAS;IACrB;IACA,aAAa,SAAS,CAAC,GAAG,MAAM,YAAY,CAAC;GAC9C,OAAO;IACN,MAAM,cAA2B;KAChC,IAAI,WAAW;KACf,MAAM;KACN,MAAM;KACN,SAAS,SAAS;KAClB,2BAAW,IAAI,KAAK;IACrB;IACA,aAAa,SAAS,CAAC,GAAG,MAAM,WAAW,CAAC;GAC7C;EACD,SAAS,OAAO;GAEf,MAAM,eAA4B;IACjC,IAAI,WAAW;IACf,MAAM;IACN,MAAM;IACN,SAAS;IACT,2BAAW,IAAI,KAAK;GACrB;GACA,aAAa,SAAS,CAAC,GAAG,MAAM,YAAY,CAAC;EAC9C,UAAU;GACT,aAAa,KAAK;EACnB;CACD,GACA,CAAC,WAAW,CACb;CAGA,IAAI,CAAC,QACJ,OACC,oBAAC,OAAD;EAAK,WAAU;EAEd,UAAA,oBAAC,OAAD;GAAK,WAAU;GACd,UAAA,qBAAC,UAAD;IACC,SAAS;IACT,WAAU;IACV,cAAW;IAHZ,UAAA,CAKC,oBAAC,UAAD;KAAU,WAAU;KAAsC,MAAK;IAAgB,CAAA,GAC/E,oBAAC,QAAD;KAAM,WAAU;KAA8B,UAAA;IAAoB,CAAA,CAC3D;;EACJ,CAAA;CACD,CAAA;CAKP,OACC,oBAAC,WAAD;EACW;EACC;EACE;EACb,SAAS;EACT,YAAY;EACZ,YAAY;EACZ,eAAe;EACF;EACH;CACV,CAAA;AAEH"}

package/dist/chat-layout.d.mts

@@ -0,0 +1,38 @@
+import * as React from "react";
+//#region src/chat-layout.d.ts
+export interface ChatLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Fixed header content (e.g., chat title, actions) */
+  header?: React.ReactNode;
+  /** Fixed footer content (e.g., composer) */
+  footer?: React.ReactNode;
+  /** Sidebar content */
+  sidebar?: React.ReactNode;
+  /** Sidebar position */
+  sidebarPosition?: "left" | "right";
+  /** Sidebar width */
+  sidebarWidth?: string;
+}
+/** Layout container for chat interfaces with header, scrollable messages, and footer. */
+declare const ChatLayout: React.ForwardRefExoticComponent<ChatLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatMessagesContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Auto-scroll to bottom on new messages */
+  autoScroll?: boolean;
+}
+/** Scrollable container for chat messages with auto-scroll support. */
+declare const ChatMessagesContainer: React.ForwardRefExoticComponent<ChatMessagesContainerProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Title of the chat */
+  title?: React.ReactNode;
+  /** Subtitle or status */
+  subtitle?: React.ReactNode;
+  /** Actions on the right side */
+  actions?: React.ReactNode;
+}
+/** Header component for chat interfaces. */
+declare const ChatHeader: React.ForwardRefExoticComponent<ChatHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Footer component for chat interfaces (typically contains composer). */
+declare const ChatFooter: React.ForwardRefExoticComponent<ChatFooterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChatFooter, ChatHeader, ChatLayout, ChatMessagesContainer };
+//# sourceMappingURL=chat-layout.d.mts.map

package/dist/chat-layout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-layout.d.mts","names":[],"sources":["../src/chat-layout.tsx"],"mappings":";;iBAGiB,wBAAwB,MAAM,eAAe;;EAE7D,SAAS,MAAM;;EAEf,SAAS,MAAM;;EAEf,UAAU,MAAM;;EAEhB;;EAEA;;;cAIK,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBA6BC,mCAAmC,MAAM,eAAe;;EAExE;;;cAIK,uBAAqB,MAAA,0BAAA,6BAAA,MAAA,cAAA;iBA2BV,wBAAwB,KAAK,MAAM,eAAe;;EAElE,QAAQ,MAAM;;EAEd,WAAW,MAAM;;EAEjB,UAAU,MAAM;;;cAIX,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAkBC,wBAAwB,MAAM,eAAe;;cAGxD,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/chat-layout.mjs

@@ -0,0 +1,94 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-layout.tsx
+/** Layout container for chat interfaces with header, scrollable messages, and footer. */
+const ChatLayout = React.forwardRef(({ className, header, footer, sidebar, sidebarPosition = "left", sidebarWidth = "280px", children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:flex wwc:h-full wwc:w-full", className),
+	...props,
+	children: [
+		sidebar && sidebarPosition === "left" && /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex-shrink-0 wwc:border-r wwc:border-border wwc:overflow-y-auto",
+			style: { width: sidebarWidth },
+			children: sidebar
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:flex-1 wwc:flex-col wwc:min-w-0",
+			children: [
+				header && /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex-shrink-0 wwc:border-b wwc:border-border",
+					children: header
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:flex-1 wwc:overflow-y-auto",
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex-shrink-0 wwc:border-t wwc:border-border",
+					children: footer
+				})
+			]
+		}),
+		sidebar && sidebarPosition === "right" && /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex-shrink-0 wwc:border-l wwc:border-border wwc:overflow-y-auto",
+			style: { width: sidebarWidth },
+			children: sidebar
+		})
+	]
+}));
+ChatLayout.displayName = "ChatLayout";
+/** Scrollable container for chat messages with auto-scroll support. */
+const ChatMessagesContainer = React.forwardRef(({ className, autoScroll = true, children, ...props }, ref) => {
+	const containerRef = React.useRef(null);
+	React.useEffect(() => {
+		if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
+	}, [children, autoScroll]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("wwc:flex wwc:flex-col wwc:px-4 wwc:overflow-y-auto", className),
+		...props,
+		children
+	});
+});
+ChatMessagesContainer.displayName = "ChatMessagesContainer";
+/** Header component for chat interfaces. */
+const ChatHeader = React.forwardRef(({ className, title, subtitle, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:flex wwc:items-center wwc:justify-between wwc:px-4 wwc:py-3", className),
+	...props,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:flex-col wwc:min-w-0",
+		children: [
+			title && /* @__PURE__ */ jsx("h2", {
+				className: "wwc:font-semibold wwc:text-foreground wwc:truncate",
+				children: title
+			}),
+			subtitle && /* @__PURE__ */ jsx("p", {
+				className: "wwc:text-sm wwc:text-muted-foreground wwc:truncate",
+				children: subtitle
+			}),
+			children
+		]
+	}), actions && /* @__PURE__ */ jsx("div", {
+		className: "wwc:flex wwc:items-center wwc:gap-2 wwc:ml-4",
+		children: actions
+	})]
+}));
+ChatHeader.displayName = "ChatHeader";
+/** Footer component for chat interfaces (typically contains composer). */
+const ChatFooter = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("wwc:px-4 wwc:py-3", className),
+	...props,
+	children
+}));
+ChatFooter.displayName = "ChatFooter";
+//#endregion
+export { ChatFooter, ChatHeader, ChatLayout, ChatMessagesContainer };
+
+//# sourceMappingURL=chat-layout.mjs.map

package/dist/chat-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-layout.mjs","names":[],"sources":["../src/chat-layout.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface ChatLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Fixed header content (e.g., chat title, actions) */\n\theader?: React.ReactNode;\n\t/** Fixed footer content (e.g., composer) */\n\tfooter?: React.ReactNode;\n\t/** Sidebar content */\n\tsidebar?: React.ReactNode;\n\t/** Sidebar position */\n\tsidebarPosition?: \"left\" | \"right\";\n\t/** Sidebar width */\n\tsidebarWidth?: string;\n}\n\n/** Layout container for chat interfaces with header, scrollable messages, and footer. */\nconst ChatLayout = React.forwardRef<HTMLDivElement, ChatLayoutProps>(\n\t({className, header, footer, sidebar, sidebarPosition = \"left\", sidebarWidth = \"280px\", children, ...props}, ref) => (\n\t\t<div ref={ref} className={cn(\"wwc:flex wwc:h-full wwc:w-full\", className)} {...props}>\n\t\t\t{sidebar && sidebarPosition === \"left\" && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:flex-shrink-0 wwc:border-r wwc:border-border wwc:overflow-y-auto\"\n\t\t\t\t\tstyle={{width: sidebarWidth}}\n\t\t\t\t>\n\t\t\t\t\t{sidebar}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"wwc:flex wwc:flex-1 wwc:flex-col wwc:min-w-0\">\n\t\t\t\t{header && <div className=\"wwc:flex-shrink-0 wwc:border-b wwc:border-border\">{header}</div>}\n\t\t\t\t<div className=\"wwc:flex-1 wwc:overflow-y-auto\">{children}</div>\n\t\t\t\t{footer && <div className=\"wwc:flex-shrink-0 wwc:border-t wwc:border-border\">{footer}</div>}\n\t\t\t</div>\n\t\t\t{sidebar && sidebarPosition === \"right\" && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:flex-shrink-0 wwc:border-l wwc:border-border wwc:overflow-y-auto\"\n\t\t\t\t\tstyle={{width: sidebarWidth}}\n\t\t\t\t>\n\t\t\t\t\t{sidebar}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t),\n);\nChatLayout.displayName = \"ChatLayout\";\n\nexport interface ChatMessagesContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Auto-scroll to bottom on new messages */\n\tautoScroll?: boolean;\n}\n\n/** Scrollable container for chat messages with auto-scroll support. */\nconst ChatMessagesContainer = React.forwardRef<HTMLDivElement, ChatMessagesContainerProps>(\n\t({className, autoScroll = true, children, ...props}, ref) => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (autoScroll && containerRef.current) {\n\t\t\t\tcontainerRef.current.scrollTop = containerRef.current.scrollHeight;\n\t\t\t}\n\t\t}, [children, autoScroll]);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(node) => {\n\t\t\t\t\t(containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\t\t\t\t\tif (typeof ref === \"function\") ref(node);\n\t\t\t\t\telse if (ref) ref.current = node;\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\"wwc:flex wwc:flex-col wwc:px-4 wwc:overflow-y-auto\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nChatMessagesContainer.displayName = \"ChatMessagesContainer\";\n\nexport interface ChatHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/** Title of the chat */\n\ttitle?: React.ReactNode;\n\t/** Subtitle or status */\n\tsubtitle?: React.ReactNode;\n\t/** Actions on the right side */\n\tactions?: React.ReactNode;\n}\n\n/** Header component for chat interfaces. */\nconst ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(\n\t({className, title, subtitle, actions, children, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"wwc:flex wwc:items-center wwc:justify-between wwc:px-4 wwc:py-3\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:min-w-0\">\n\t\t\t\t{title && <h2 className=\"wwc:font-semibold wwc:text-foreground wwc:truncate\">{title}</h2>}\n\t\t\t\t{subtitle && <p className=\"wwc:text-sm wwc:text-muted-foreground wwc:truncate\">{subtitle}</p>}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{actions && <div className=\"wwc:flex wwc:items-center wwc:gap-2 wwc:ml-4\">{actions}</div>}\n\t\t</div>\n\t),\n);\nChatHeader.displayName = \"ChatHeader\";\n\nexport interface ChatFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Footer component for chat interfaces (typically contains composer). */\nconst ChatFooter = React.forwardRef<HTMLDivElement, ChatFooterProps>(({className, children, ...props}, ref) => (\n\t<div ref={ref} className={cn(\"wwc:px-4 wwc:py-3\", className)} {...props}>\n\t\t{children}\n\t</div>\n));\nChatFooter.displayName = \"ChatFooter\";\n\nexport {ChatLayout, ChatMessagesContainer, ChatHeader, ChatFooter};\n"],"mappings":";;;;;AAiBA,MAAM,aAAa,MAAM,YACvB,EAAC,WAAW,QAAQ,QAAQ,SAAS,kBAAkB,QAAQ,eAAe,SAAS,UAAU,GAAG,SAAQ,QAC5G,qBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,kCAAkC,SAAS;CAAG,GAAI;CAA/E,UAAA;EACE,WAAW,oBAAoB,UAC/B,oBAAC,OAAD;GACC,WAAU;GACV,OAAO,EAAC,OAAO,aAAY;GAE1B,UAAA;EACG,CAAA;EAEN,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,UAAU,oBAAC,OAAD;KAAK,WAAU;KAAoD,UAAA;IAAY,CAAA;IAC1F,oBAAC,OAAD;KAAK,WAAU;KAAkC;IAAc,CAAA;IAC9D,UAAU,oBAAC,OAAD;KAAK,WAAU;KAAoD,UAAA;IAAY,CAAA;GACtF;;EACJ,WAAW,oBAAoB,WAC/B,oBAAC,OAAD;GACC,WAAU;GACV,OAAO,EAAC,OAAO,aAAY;GAE1B,UAAA;EACG,CAAA;CAEF;AAEP,CAAA,CAAA;AACA,WAAW,cAAc;;AAQzB,MAAM,wBAAwB,MAAM,YAClC,EAAC,WAAW,aAAa,MAAM,UAAU,GAAG,SAAQ,QAAQ;CAC5D,MAAM,eAAe,MAAM,OAAuB,IAAI;CAEtD,MAAM,gBAAgB;EACrB,IAAI,cAAc,aAAa,SAC9B,aAAa,QAAQ,YAAY,aAAa,QAAQ;CAExD,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,OACC,oBAAC,OAAD;EACC,MAAM,SAAS;GACd,aAAgE,UAAU;GAC1E,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;QAClC,IAAI,KAAK,IAAI,UAAU;EAC7B;EACA,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;EAEH;CACG,CAAA;AAEP,CACD;AACA,sBAAsB,cAAc;;AAYpC,MAAM,aAAa,MAAM,YACvB,EAAC,WAAW,OAAO,UAAU,SAAS,UAAU,GAAG,SAAQ,QAC3D,qBAAC,OAAD;CACM;CACL,WAAW,GAAG,mEAAmE,SAAS;CAC1F,GAAI;CAHL,UAAA,CAKC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,SAAS,oBAAC,MAAD;IAAI,WAAU;IAAsD,UAAA;GAAU,CAAA;GACvF,YAAY,oBAAC,KAAD;IAAG,WAAU;IAAsD,UAAA;GAAY,CAAA;GAC3F;EACG;CACJ,CAAA,GAAA,WAAW,oBAAC,OAAD;EAAK,WAAU;EAAgD,UAAA;CAAa,CAAA,CACpF;AAEP,CAAA,CAAA;AACA,WAAW,cAAc;;AAKzB,MAAM,aAAa,MAAM,YAA6C,EAAC,WAAW,UAAU,GAAG,SAAQ,QACtG,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,qBAAqB,SAAS;CAAG,GAAI;CAChE;AACG,CAAA,CACL;AACD,WAAW,cAAc"}

package/dist/chat-message.d.mts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/chat-message.d.ts
+declare const chatMessageVariants: (props?: ({
+  variant?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const chatMessageBubbleVariants: (props?: ({
+  variant?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chatMessageVariants> {
+  /** Message content */
+  children: React.ReactNode;
+  /** Avatar image URL */
+  avatar?: string;
+  /** Avatar fallback text */
+  avatarFallback?: string;
+  /** Show avatar */
+  showAvatar?: boolean;
+  /** Timestamp for the message */
+  timestamp?: string | Date;
+  /** Whether the message is being streamed */
+  isStreaming?: boolean;
+}
+/** Individual chat message bubble with avatar and optional metadata. */
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatMessageMetadataProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Label for the metadata */
+  label?: string;
+}
+/** Metadata display for chat messages (tokens, model, etc.) */
+declare const ChatMessageMetadata: React.ForwardRefExoticComponent<ChatMessageMetadataProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatSystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Icon to display */
+  icon?: React.ReactNode;
+}
+/** System notification message in chat (user joined, typing indicator, etc.) */
+declare const ChatSystemMessage: React.ForwardRefExoticComponent<ChatSystemMessageProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChatMessage, ChatMessageMetadata, ChatSystemMessage, chatMessageBubbleVariants, chatMessageVariants };
+//# sourceMappingURL=chat-message.d.mts.map

package/dist/chat-message.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.d.mts","names":[],"sources":["../src/chat-message.tsx"],"mappings":";;;cAMM,sBAAmB;;6CAWvB;cAEI,4BAAyB;;6CAW7B;iBAEe,yBACR,MAAM,eAAe,iBAAiB,oBAAoB;;EAElE,UAAU,MAAM;;EAEhB;;EAEA;;EAEA;;EAEA,qBAAqB;;EAErB;;;cAIK,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;iBA4DA,iCAAiC,MAAM,eAAe;;EAEtE;;;cAIK,qBAAmB,MAAA,0BAAA,2BAAA,MAAA,cAAA;iBAcR,+BAA+B,MAAM,eAAe;;EAEpE,OAAO,MAAM;;;cAIR,mBAAiB,MAAA,0BAAA,yBAAA,MAAA,cAAA"}

package/dist/chat-message.mjs

@@ -0,0 +1,84 @@
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/chat-message.tsx
+const chatMessageVariants = cva("wwc:flex wwc:gap-3 wwc:py-4", {
+	variants: { variant: {
+		user: "wwc:flex-row-reverse",
+		assistant: "wwc:flex-row",
+		system: "wwc:justify-center"
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+const chatMessageBubbleVariants = cva("wwc:rounded-2xl wwc:px-4 wwc:py-2.5 wwc:max-w-[80%]", {
+	variants: { variant: {
+		user: "wwc:bg-primary wwc:text-primary-foreground wwc:rounded-br-sm",
+		assistant: "wwc:bg-muted wwc:text-foreground wwc:rounded-bl-sm",
+		system: "wwc:bg-transparent wwc:text-muted-foreground wwc:text-sm wwc:italic"
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+/** Individual chat message bubble with avatar and optional metadata. */
+const ChatMessage = React.forwardRef(({ className, variant = "assistant", children, avatar, avatarFallback, showAvatar = true, timestamp, isStreaming = false, ...props }, ref) => {
+	const formattedTime = timestamp instanceof Date ? timestamp.toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit"
+	}) : timestamp;
+	if (variant === "system") return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(chatMessageVariants({ variant }), className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: chatMessageBubbleVariants({ variant }),
+			children
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(chatMessageVariants({ variant }), className),
+		...props,
+		children: [showAvatar && /* @__PURE__ */ jsxs(Avatar, {
+			size: "sm",
+			className: "wwc:flex-shrink-0",
+			children: [avatar && /* @__PURE__ */ jsx(AvatarImage, {
+				src: avatar,
+				alt: "Avatar"
+			}), /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback || (variant === "user" ? "U" : "A") })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:flex-col wwc:gap-1 wwc:min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: chatMessageBubbleVariants({ variant }),
+				children: [children, isStreaming && /* @__PURE__ */ jsx("span", { className: "wwc:inline-block wwc:w-2 wwc:h-4 wwc:bg-current wwc:animate-pulse wwc:ml-1" })]
+			}), formattedTime && /* @__PURE__ */ jsx("span", {
+				className: cn("wwc:text-xs wwc:text-muted-foreground wwc:px-1", variant === "user" ? "wwc:text-right" : "wwc:text-left"),
+				children: formattedTime
+			})]
+		})]
+	});
+});
+ChatMessage.displayName = "ChatMessage";
+/** Metadata display for chat messages (tokens, model, etc.) */
+const ChatMessageMetadata = React.forwardRef(({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:flex wwc:items-center wwc:gap-2 wwc:text-xs wwc:text-muted-foreground", className),
+	...props,
+	children: [label && /* @__PURE__ */ jsxs("span", {
+		className: "wwc:font-medium",
+		children: [label, ":"]
+	}), children]
+}));
+ChatMessageMetadata.displayName = "ChatMessageMetadata";
+/** System notification message in chat (user joined, typing indicator, etc.) */
+const ChatSystemMessage = React.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:py-2 wwc:text-xs wwc:text-muted-foreground", className),
+	...props,
+	children: [icon, /* @__PURE__ */ jsx("span", { children })]
+}));
+ChatSystemMessage.displayName = "ChatSystemMessage";
+//#endregion
+export { ChatMessage, ChatMessageMetadata, ChatSystemMessage, chatMessageBubbleVariants, chatMessageVariants };
+
+//# sourceMappingURL=chat-message.mjs.map

package/dist/chat-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.mjs","names":[],"sources":["../src/chat-message.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport {Avatar, AvatarFallback, AvatarImage} from \"./avatar\";\n\nconst chatMessageVariants = cva(\"wwc:flex wwc:gap-3 wwc:py-4\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tuser: \"wwc:flex-row-reverse\",\n\t\t\tassistant: \"wwc:flex-row\",\n\t\t\tsystem: \"wwc:justify-center\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"assistant\",\n\t},\n});\n\nconst chatMessageBubbleVariants = cva(\"wwc:rounded-2xl wwc:px-4 wwc:py-2.5 wwc:max-w-[80%]\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tuser: \"wwc:bg-primary wwc:text-primary-foreground wwc:rounded-br-sm\",\n\t\t\tassistant: \"wwc:bg-muted wwc:text-foreground wwc:rounded-bl-sm\",\n\t\t\tsystem: \"wwc:bg-transparent wwc:text-muted-foreground wwc:text-sm wwc:italic\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"assistant\",\n\t},\n});\n\nexport interface ChatMessageProps\n\textends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chatMessageVariants> {\n\t/** Message content */\n\tchildren: React.ReactNode;\n\t/** Avatar image URL */\n\tavatar?: string;\n\t/** Avatar fallback text */\n\tavatarFallback?: string;\n\t/** Show avatar */\n\tshowAvatar?: boolean;\n\t/** Timestamp for the message */\n\ttimestamp?: string | Date;\n\t/** Whether the message is being streamed */\n\tisStreaming?: boolean;\n}\n\n/** Individual chat message bubble with avatar and optional metadata. */\nconst ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant = \"assistant\",\n\t\t\tchildren,\n\t\t\tavatar,\n\t\t\tavatarFallback,\n\t\t\tshowAvatar = true,\n\t\t\ttimestamp,\n\t\t\tisStreaming = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst formattedTime =\n\t\t\ttimestamp instanceof Date\n\t\t\t\t? timestamp.toLocaleTimeString(undefined, {hour: \"2-digit\", minute: \"2-digit\"})\n\t\t\t\t: timestamp;\n\n\t\tif (variant === \"system\") {\n\t\t\treturn (\n\t\t\t\t<div ref={ref} className={cn(chatMessageVariants({variant}), className)} {...props}>\n\t\t\t\t\t<div className={chatMessageBubbleVariants({variant})}>{children}</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(chatMessageVariants({variant}), className)} {...props}>\n\t\t\t\t{showAvatar && (\n\t\t\t\t\t<Avatar size=\"sm\" className=\"wwc:flex-shrink-0\">\n\t\t\t\t\t\t{avatar && <AvatarImage src={avatar} alt=\"Avatar\" />}\n\t\t\t\t\t\t<AvatarFallback>{avatarFallback || (variant === \"user\" ? \"U\" : \"A\")}</AvatarFallback>\n\t\t\t\t\t</Avatar>\n\t\t\t\t)}\n\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-1 wwc:min-w-0\">\n\t\t\t\t\t<div className={chatMessageBubbleVariants({variant})}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t\t{isStreaming && (\n\t\t\t\t\t\t\t<span className=\"wwc:inline-block wwc:w-2 wwc:h-4 wwc:bg-current wwc:animate-pulse wwc:ml-1\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{formattedTime && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:text-xs wwc:text-muted-foreground wwc:px-1\",\n\t\t\t\t\t\t\t\tvariant === \"user\" ? \"wwc:text-right\" : \"wwc:text-left\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{formattedTime}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nChatMessage.displayName = \"ChatMessage\";\n\nexport interface ChatMessageMetadataProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Label for the metadata */\n\tlabel?: string;\n}\n\n/** Metadata display for chat messages (tokens, model, etc.) */\nconst ChatMessageMetadata = React.forwardRef<HTMLDivElement, ChatMessageMetadataProps>(\n\t({className, label, children, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"wwc:flex wwc:items-center wwc:gap-2 wwc:text-xs wwc:text-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label && <span className=\"wwc:font-medium\">{label}:</span>}\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nChatMessageMetadata.displayName = \"ChatMessageMetadata\";\n\nexport interface ChatSystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Icon to display */\n\ticon?: React.ReactNode;\n}\n\n/** System notification message in chat (user joined, typing indicator, etc.) */\nconst ChatSystemMessage = React.forwardRef<HTMLDivElement, ChatSystemMessageProps>(\n\t({className, icon, children, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:py-2 wwc:text-xs wwc:text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon}\n\t\t\t<span>{children}</span>\n\t\t</div>\n\t),\n);\nChatSystemMessage.displayName = \"ChatSystemMessage\";\n\nexport {ChatMessage, ChatMessageMetadata, ChatSystemMessage, chatMessageVariants, chatMessageBubbleVariants};\n"],"mappings":";;;;;;AAMA,MAAM,sBAAsB,IAAI,+BAA+B;CAC9D,UAAU,EACT,SAAS;EACR,MAAM;EACN,WAAW;EACX,QAAQ;CACT,EACD;CACA,iBAAiB,EAChB,SAAS,YACV;AACD,CAAC;AAED,MAAM,4BAA4B,IAAI,uDAAuD;CAC5F,UAAU,EACT,SAAS;EACR,MAAM;EACN,WAAW;EACX,QAAQ;CACT,EACD;CACA,iBAAiB,EAChB,SAAS,YACV;AACD,CAAC;;AAmBD,MAAM,cAAc,MAAM,YAExB,EACC,WACA,UAAU,aACV,UACA,QACA,gBACA,aAAa,MACb,WACA,cAAc,OACd,GAAG,SAEJ,QACI;CACJ,MAAM,gBACL,qBAAqB,OAClB,UAAU,mBAAmB,KAAA,GAAW;EAAC,MAAM;EAAW,QAAQ;CAAS,CAAC,IAC5E;CAEJ,IAAI,YAAY,UACf,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,oBAAoB,EAAC,QAAO,CAAC,GAAG,SAAS;EAAG,GAAI;EAC5E,UAAA,oBAAC,OAAD;GAAK,WAAW,0BAA0B,EAAC,QAAO,CAAC;GAAI;EAAc,CAAA;CACjE,CAAA;CAIP,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,oBAAoB,EAAC,QAAO,CAAC,GAAG,SAAS;EAAG,GAAI;EAA7E,UAAA,CACE,cACA,qBAAC,QAAD;GAAQ,MAAK;GAAK,WAAU;GAA5B,UAAA,CACE,UAAU,oBAAC,aAAD;IAAa,KAAK;IAAQ,KAAI;GAAU,CAAA,GACnD,oBAAC,gBAAD,EAAA,UAAiB,mBAAmB,YAAY,SAAS,MAAM,KAAqB,CAAA,CAC7E;EAET,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,qBAAC,OAAD;IAAK,WAAW,0BAA0B,EAAC,QAAO,CAAC;IAAnD,UAAA,CACE,UACA,eACA,oBAAC,QAAD,EAAM,WAAU,6EAA8E,CAAA,CAE3F;GACJ,CAAA,GAAA,iBACA,oBAAC,QAAD;IACC,WAAW,GACV,kDACA,YAAY,SAAS,mBAAmB,eACzC;IAEC,UAAA;GACI,CAAA,CAEH;EACD,CAAA,CAAA;;AAEP,CACD;AACA,YAAY,cAAc;;AAQ1B,MAAM,sBAAsB,MAAM,YAChC,EAAC,WAAW,OAAO,UAAU,GAAG,SAAQ,QACxC,qBAAC,OAAD;CACM;CACL,WAAW,GAAG,6EAA6E,SAAS;CACpG,GAAI;CAHL,UAAA,CAKE,SAAS,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CAAmC,OAAM,GAAO;CACzD,CAAA,GAAA,QACG;AAEP,CAAA,CAAA;AACA,oBAAoB,cAAc;;AAQlC,MAAM,oBAAoB,MAAM,YAC9B,EAAC,WAAW,MAAM,UAAU,GAAG,SAAQ,QACvC,qBAAC,OAAD;CACM;CACL,WAAW,GACV,yGACA,SACD;CACA,GAAI;CANL,UAAA,CAQE,MACD,oBAAC,QAAD,EAAO,SAAe,CAAA,CAClB;AAEP,CAAA,CAAA;AACA,kBAAkB,cAAc"}

package/dist/checkbox.d.mts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/checkbox.d.ts
+/** A control that allows the user to toggle between checked and not checked. */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.mts.map

package/dist/checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../src/checkbox.tsx"],"mappings":";;;;cAMM,UAAQ,MAAA,0BAAA,KAAA,kBAAA,gBAAA,MAAA,cAAA,6BAAA,MAAA,cAAA"}

package/dist/checkbox.mjs

@@ -0,0 +1,22 @@
+import { cn } from "@corensystem/coren-utils";
+import { Check, Minus } from "lucide-react";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/checkbox.tsx
+/** A control that allows the user to toggle between checked and not checked. */
+const Checkbox = React.forwardRef(({ className, checked, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+	ref,
+	checked,
+	className: cn("wwc:peer wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:rounded-[var(--radius-control)] wwc:border wwc:border-primary wwc:shadow wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50 wwc:data-[state=checked]:bg-primary wwc:data-[state=checked]:text-primary-foreground wwc:data-[state=indeterminate]:bg-primary wwc:data-[state=indeterminate]:text-primary-foreground", className),
+	...props,
+	children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+		className: cn("wwc:flex wwc:items-center wwc:justify-center wwc:text-current"),
+		children: checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "wwc:h-4 wwc:w-4" }) : /* @__PURE__ */ jsx(Check, { className: "wwc:h-4 wwc:w-4" })
+	})
+}));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.mjs.map

package/dist/checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.mjs","names":[],"sources":["../src/checkbox.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport {Check, Minus} from \"lucide-react\";\nimport * as React from \"react\";\n\n/** A control that allows the user to toggle between checked and not checked. */\nconst Checkbox = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({className, checked, ...props}, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tchecked={checked}\n\t\tclassName={cn(\n\t\t\t\"wwc:peer wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:rounded-[var(--radius-control)] wwc:border wwc:border-primary wwc:shadow wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50 wwc:data-[state=checked]:bg-primary wwc:data-[state=checked]:text-primary-foreground wwc:data-[state=indeterminate]:bg-primary wwc:data-[state=indeterminate]:text-primary-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className={cn(\"wwc:flex wwc:items-center wwc:justify-center wwc:text-current\")}>\n\t\t\t{checked === \"indeterminate\" ? <Minus className=\"wwc:h-4 wwc:w-4\" /> : <Check className=\"wwc:h-4 wwc:w-4\" />}\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport {Checkbox};\n"],"mappings":";;;;;;;AAMA,MAAM,WAAW,MAAM,YAGpB,EAAC,WAAW,SAAS,GAAG,SAAQ,QAClC,oBAAC,kBAAkB,MAAnB;CACM;CACI;CACT,WAAW,GACV,wbACA,SACD;CACA,GAAI;CAEJ,UAAA,oBAAC,kBAAkB,WAAnB;EAA6B,WAAW,GAAG,+DAA+D;EACxG,UAAA,YAAY,kBAAkB,oBAAC,OAAD,EAAO,WAAU,kBAAmB,CAAA,IAAI,oBAAC,OAAD,EAAO,WAAU,kBAAmB,CAAA;CAC/E,CAAA;AACN,CAAA,CACxB;AACD,SAAS,cAAc,kBAAkB,KAAK"}

package/dist/chip.d.mts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+//#region src/chip.d.ts
+declare const chipVariants: (props?: ({
+  variant?: "filter" | "attachment" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FilterChipProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof chipVariants> & {
+  variant?: "filter";
+  /** Show a checkmark icon when selected. Defaults to true. */
+  showCheck?: boolean;
+  /** Optional leading icon. When provided, replaces the default checkmark. */
+  leadingIcon?: React.ReactNode;
+  /** Optional trailing icon. */
+  trailingIcon?: React.ReactNode;
+};
+/** Preview content shown when the user hovers over an attachment chip. */
+export type AttachmentPreview = {
+  type: "image";
+  /** Image URL or data URI. */
+  src: string;
+  /** Optional alt text. */
+  alt?: string;
+} | {
+  type: "custom";
+  /** Custom preview node (e.g. a code snippet, document excerpt). */
+  content: React.ReactNode;
+};
+type AttachmentChipProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof chipVariants> & {
+  variant: "attachment";
+  /** Optional leading icon, displayed before the label. */
+  leadingIcon?: React.ReactNode;
+  /** Called when the user clicks the trailing X. When provided, a remove button is rendered. */
+  onRemove?: () => void;
+  /** Accessible label for the remove button. */
+  removeLabel?: string;
+  /** Disable the chip. */
+  disabled?: boolean;
+  children?: React.ReactNode;
+  /** Hover preview content. When provided, hovering the chip shows a fixed-size preview card above. */
+  preview?: AttachmentPreview;
+  /** Caption shown under the preview content. Defaults to the chip's label (children). */
+  previewCaption?: React.ReactNode;
+};
+export type ChipProps = FilterChipProps | AttachmentChipProps;
+/**
+ * A compact pill-shaped element with two variants: a toggleable `filter` chip with a checkmark,
+ * and a static `attachment` chip for displaying selected files or context items.
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Chip, chipVariants };
+//# sourceMappingURL=chip.d.mts.map

package/dist/chip.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.mts","names":[],"sources":["../src/chip.tsx"],"mappings":";;;;cAQM,eAAY;;;6CAsBjB;KAEI,kBAAkB,MAAM,gCAAgC,gBAAgB,QAC5E,oBAAoB;EACnB;;EAEA;;EAEA,cAAc,MAAM;;EAEpB,eAAe,MAAM;;;YAIX;EAET;;EAEA;;EAEA;;EAGA;;EAEA,SAAS,MAAM;;KAGb,sBAAsB,KAAK,MAAM,eAAe,gCACpD,oBAAoB;EACnB;;EAEA,cAAc,MAAM;;EAEpB;;EAEA;;EAEA;EACA,WAAW,MAAM;;EAEjB,UAAU;;EAEV,iBAAiB,MAAM;;YAGb,YAAY,kBAAkB;;;;;cA6HpC,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}