@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/comment/use-comment-margin-fits.mjs

@@ -0,0 +1,34 @@
+import { DESKTOP_MEDIA_QUERY } from "../../lib/desktop-media.mjs";
+import { useLayoutEffect, useState, useSyncExternalStore } from "react";
+//#region src/components/comment/use-comment-margin-fits.ts
+function subscribeDesktop(onChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+const getDesktop = () => typeof window !== "undefined" && window.matchMedia("(width >= 48rem) and (pointer: fine)").matches;
+/**
+* Whether a viewer has room for a comment margin beside its document: true
+* only on a desktop (from 768px with a mouse or a trackpad, the query the
+* desktop metrics use) and while `element`, the viewer that holds the
+* document and the margin, is at least `minWidth` wide. Otherwise show
+* `CommentMarker`s and open discussions in a bottom sheet. Cards and markers
+* are different trees, so this is measured in JavaScript (a
+* `ResizeObserver` on the element), not decided by a container query.
+*/
+function useCommentMarginFits(element, { minWidth = 784 } = {}) {
+	const desktop = useSyncExternalStore(subscribeDesktop, getDesktop, () => false);
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const measure = () => setWidth(element.getBoundingClientRect().width);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element]);
+	return desktop && element !== null && width >= minWidth;
+}
+//#endregion
+export { useCommentMarginFits };

package/dist/components/composer/composer-attachment.recipe.mjs

@@ -0,0 +1,85 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/composer/composer-attachment.recipe.ts
+const composerAttachment = tv({
+	slots: {
+		attachments: [
+			"flex flex-wrap gap-2",
+			"has-data-[slot=composer-attachments-scroll-area]:relative",
+			"has-data-[slot=composer-attachments-scroll-area]:block",
+			"has-[[data-slot=composer-attachments-scroll-area]]:min-w-0",
+			"has-data-[slot=sortable-composer-attachments-list]:block",
+			"has-[[data-slot=sortable-composer-attachments-list]]:min-w-0",
+			"pt-1.5 pe-1.5",
+			"has-[[data-slot=composer-attachments-scroll-area]]:p-0",
+			"has-[[data-slot=sortable-composer-attachments-list]]:pt-0"
+		],
+		attachmentsScrollArea: ["relative w-full min-w-0"],
+		attachmentsViewport: [
+			"flex flex-nowrap gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain py-1.5",
+			"scrollbar-none [&::-webkit-scrollbar]:hidden",
+			"**:data-[slot=composer-attachment]:shrink-0",
+			"pe-1.5"
+		],
+		attachmentsNav: [
+			"absolute top-1/2 z-30 -translate-y-1/2",
+			"size-8 rounded-chip shadow-none",
+			"[&_svg:not([class*='size-'])]:size-4.5"
+		],
+		attachment: ["group/composer-attachment relative", "[--ca-overlay-border:1px]"],
+		attachmentFile: [
+			"relative flex h-16 w-44",
+			"[&_svg]:size-4 [&_svg]:shrink-0",
+			"items-center gap-2.5 rounded-control border border-line-hairline bg-fill-muted px-2",
+			"text-foreground [&_svg]:text-foreground-muted"
+		],
+		attachmentImage: [
+			"relative block size-16 shrink-0 overflow-hidden",
+			"**:data-[slot=file-preview]:size-full **:data-[slot=file-preview-media]:size-full",
+			"**:data-[slot=file-preview-media]:border-0 **:data-[slot=file-preview-media]:bg-transparent",
+			"**:data-[slot=file-preview-media]:shadow-none **:data-[slot=file-preview-media]:ring-0",
+			"rounded-control border border-line-hairline bg-fill-muted"
+		],
+		attachmentBody: ["min-w-0 flex-1", "flex flex-col justify-center gap-0.5"],
+		attachmentTitle: ["block truncate", "font-sans text-footnote font-semibold text-foreground"],
+		attachmentMeta: ["block w-full truncate", "text-left font-mono text-mono-meta text-foreground-hint"],
+		attachmentUploadingOverlay: [
+			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
+			"text-center",
+			"rounded-control bg-layer-veil",
+			"font-mono text-mono-meta font-bold text-foreground"
+		],
+		attachmentUploadProgressBar: [
+			"absolute z-20 h-1 overflow-hidden",
+			"right-1.5 bottom-1.5 left-1.5 w-auto rounded-[2px]",
+			"bg-layer-card"
+		],
+		attachmentUploadProgressBarIndicator: ["block h-full", "rounded-[inherit] bg-info"],
+		attachmentFailedOverlay: [
+			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
+			"[border-width:var(--ca-overlay-border,2px)]",
+			"text-center",
+			"rounded-control border-danger-strong bg-layer-veil",
+			"font-sans text-caption font-semibold text-danger-strong"
+		],
+		attachmentRemove: [
+			"absolute z-20 flex items-center justify-center",
+			"transition-opacity group-hover/composer-attachment:opacity-100",
+			"[@media(hover:none)]:opacity-100",
+			"[&_svg]:shrink-0",
+			"-top-1.5 -right-1.5 size-5 rounded-sticker border-[1.5px] border-line-strong",
+			"bg-layer-card text-foreground opacity-100",
+			"hover:overlay-medium active:overlay-medium",
+			"outline-none focus-visible:shadow-focus",
+			"disabled:cursor-not-allowed disabled:border-line-hairline disabled:bg-fill-muted disabled:text-foreground-disabled",
+			"after:absolute after:-inset-3 after:content-['']",
+			"[@media(hover:none)]:size-5",
+			"[&_svg]:size-3"
+		]
+	},
+	variants: { side: {
+		prev: { attachmentsNav: "left-1.5" },
+		next: { attachmentsNav: "right-1.5" }
+	} }
+});
+//#endregion
+export { composerAttachment };

package/dist/components/composer/composer-attachments-scroll-area.d.mts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/composer/composer-attachments-scroll-area.d.ts
+export type ComposerAttachmentsScrollAreaProps = ComponentPropsWithoutRef<"div">;
+export declare function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMouseLeave, ...props }: ComposerAttachmentsScrollAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/composer/composer-attachments-scroll-area.mjs

@@ -0,0 +1,93 @@
+import { Button } from "../button/button.mjs";
+import { composerAttachment } from "./composer-attachment.recipe.mjs";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/composer/composer-attachments-scroll-area.tsx
+function scrollByPage(viewport, direction) {
+	if (!viewport) return;
+	const page = viewport.clientWidth;
+	if (page <= 0) return;
+	const target = Math.round(viewport.scrollLeft / page) * page + direction * page;
+	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	viewport.scrollTo({
+		left: target,
+		behavior: prefersReducedMotion ? "auto" : "smooth"
+	});
+}
+function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMouseLeave, ...props }) {
+	const { attachmentsScrollArea, attachmentsViewport } = composerAttachment();
+	const prevNavClassName = composerAttachment({ side: "prev" }).attachmentsNav();
+	const nextNavClassName = composerAttachment({ side: "next" }).attachmentsNav();
+	const viewportRef = useRef(null);
+	const [canPrev, setCanPrev] = useState(false);
+	const [canNext, setCanNext] = useState(false);
+	const updateScrollState = () => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
+		setCanPrev(viewport.scrollLeft > 1);
+		setCanNext(maxScrollLeft - viewport.scrollLeft > 1);
+	};
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		updateScrollState();
+		const resizeObserver = new ResizeObserver(updateScrollState);
+		resizeObserver.observe(viewport);
+		for (const child of viewport.children) resizeObserver.observe(child);
+		const mutationObserver = new MutationObserver(() => {
+			for (const child of viewport.children) resizeObserver.observe(child);
+			updateScrollState();
+		});
+		mutationObserver.observe(viewport, { childList: true });
+		viewport.addEventListener("scroll", updateScrollState, { passive: true });
+		window.addEventListener("resize", updateScrollState);
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			viewport.removeEventListener("scroll", updateScrollState);
+			window.removeEventListener("resize", updateScrollState);
+		};
+	}, []);
+	const handleScrollPrev = useCallback(() => scrollByPage(viewportRef.current, -1), []);
+	const handleScrollNext = useCallback(() => scrollByPage(viewportRef.current, 1), []);
+	const showPrev = canPrev;
+	const showNext = canNext;
+	const navVariant = "default";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-attachments-scroll-area",
+		className: attachmentsScrollArea({ className }),
+		onMouseEnter,
+		onMouseLeave,
+		...props,
+		children: [
+			showPrev ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-md",
+				variant: navVariant,
+				"aria-label": "Scroll attachments left",
+				className: prevNavClassName,
+				onClick: handleScrollPrev,
+				children: /* @__PURE__ */ jsx(ChevronLeft, {})
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: viewportRef,
+				"data-slot": "composer-attachments-viewport",
+				className: attachmentsViewport(),
+				children
+			}),
+			showNext ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-md",
+				variant: navVariant,
+				"aria-label": "Scroll attachments right",
+				className: nextNavClassName,
+				onClick: handleScrollNext,
+				children: /* @__PURE__ */ jsx(ChevronRight, {})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ComposerAttachmentsScrollArea };

package/dist/components/composer/composer-attachments.d.mts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-attachments.d.ts
+export type ComposerAttachmentsProps = useRender.ComponentProps<"div">;
+export declare function ComposerAttachments({ className, render, ...props }: ComposerAttachmentsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentProps = useRender.ComponentProps<"div">;
+export declare function ComposerAttachment({ className, render, ...props }: ComposerAttachmentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentFileProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentFile({ className, render, ...props }: ComposerAttachmentFileProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentImageProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentImage({ className, render, ...props }: ComposerAttachmentImageProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentBodyProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentBody({ className, render, ...props }: ComposerAttachmentBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentTitleProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentTitle({ className, render, ...props }: ComposerAttachmentTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentMetaProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentMeta({ className, render, ...props }: ComposerAttachmentMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentUploadingOverlayProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentUploadingOverlay({ className, render, ...props }: ComposerAttachmentUploadingOverlayProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentUploadProgressBarProps = Omit<useRender.ComponentProps<"span">, "children"> & {
+  value: number;
+};
+export declare function ComposerAttachmentUploadProgressBar({ className, render, value, ...props }: ComposerAttachmentUploadProgressBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentFailedOverlayProps = useRender.ComponentProps<"span">;
+export declare function ComposerAttachmentFailedOverlay({ className, render, ...props }: ComposerAttachmentFailedOverlayProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerAttachmentRemoveProps = useRender.ComponentProps<"button">;
+export declare function ComposerAttachmentRemove({ className, render, ...props }: ComposerAttachmentRemoveProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/composer/composer-attachments.mjs

@@ -0,0 +1,147 @@
+import { composerAttachment } from "./composer-attachment.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-attachments.tsx
+function ComposerAttachments({ className, render, ...props }) {
+	const { attachments } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachments",
+		className: attachments({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachment({ className, render, ...props }) {
+	const { attachment } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment",
+		className: attachment({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentFile({ className, render, ...props }) {
+	const { attachmentFile } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-file",
+		className: attachmentFile({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentImage({ className, render, ...props }) {
+	const { attachmentImage } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-image",
+		className: attachmentImage({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentBody({ className, render, ...props }) {
+	const { attachmentBody } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-body",
+		className: attachmentBody({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentTitle({ className, render, ...props }) {
+	const { attachmentTitle } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-title",
+		className: attachmentTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentMeta({ className, render, ...props }) {
+	const { attachmentMeta } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-meta",
+		className: attachmentMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentUploadingOverlay({ className, render, ...props }) {
+	const { attachmentUploadingOverlay } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-uploading-overlay",
+		className: attachmentUploadingOverlay({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentUploadProgressBar({ className, render, value, ...props }) {
+	const { attachmentUploadProgressBar, attachmentUploadProgressBarIndicator } = composerAttachment();
+	const progress = Math.max(4, Math.min(value, 100));
+	const defaultProps = {
+		"aria-hidden": true,
+		"data-slot": "composer-attachment-upload-progress-bar",
+		className: attachmentUploadProgressBar({ className }),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "composer-attachment-upload-progress-bar-indicator",
+			className: attachmentUploadProgressBarIndicator(),
+			style: { width: `${progress}%` }
+		})
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentFailedOverlay({ className, render, ...props }) {
+	const { attachmentFailedOverlay } = composerAttachment();
+	const defaultProps = {
+		"data-slot": "composer-attachment-failed-overlay",
+		className: attachmentFailedOverlay({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerAttachmentRemove({ className, render, ...props }) {
+	const { attachmentRemove } = composerAttachment();
+	const defaultProps = {
+		type: "button",
+		"data-slot": "composer-attachment-remove",
+		className: attachmentRemove({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Button, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ComposerAttachment, ComposerAttachmentBody, ComposerAttachmentFailedOverlay, ComposerAttachmentFile, ComposerAttachmentImage, ComposerAttachmentMeta, ComposerAttachmentRemove, ComposerAttachmentTitle, ComposerAttachmentUploadProgressBar, ComposerAttachmentUploadingOverlay, ComposerAttachments };

package/dist/components/composer/composer-drop-overlay.d.mts

@@ -0,0 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-drop-overlay.d.ts
+export type ComposerDropOverlayProps = useRender.ComponentProps<"div">;
+export declare function ComposerDropOverlay({ className, render, ...props }: ComposerDropOverlayProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerDropOverlayLabelProps = useRender.ComponentProps<"span">;
+export declare function ComposerDropOverlayLabel({ className, render, ...props }: ComposerDropOverlayLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerDropOverlayPromptProps = ComposerDropOverlayLabelProps;
+export declare function ComposerDropOverlayPrompt({ children, ...props }: ComposerDropOverlayPromptProps): import("react").JSX.Element;
+//#endregion

package/dist/components/composer/composer-drop-overlay.mjs

@@ -0,0 +1,60 @@
+import { composerDropOverlay } from "./composer-drop-overlay.recipe.mjs";
+import { FileText, Image, Upload } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-drop-overlay.tsx
+function ComposerDropOverlay({ className, render, ...props }) {
+	const { dropOverlay } = composerDropOverlay();
+	const defaultProps = {
+		"data-slot": "composer-drop-overlay",
+		className: dropOverlay({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerDropOverlayLabel({ className, render, ...props }) {
+	const { dropOverlayLabel } = composerDropOverlay();
+	const defaultProps = {
+		"data-slot": "composer-drop-overlay-label",
+		className: dropOverlayLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerDropOverlayPrompt({ children, ...props }) {
+	const { dropOverlayIcon, dropOverlayIconCluster } = composerDropOverlay();
+	if (children) return /* @__PURE__ */ jsx(ComposerDropOverlayLabel, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(ComposerDropOverlayLabel, {
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": true,
+			className: dropOverlayIconCluster(),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: dropOverlayIcon({ className: "absolute -translate-x-6 translate-y-1 -rotate-12" }),
+					children: /* @__PURE__ */ jsx(FileText, { className: "text-foreground-muted" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: dropOverlayIcon({ className: "absolute z-10" }),
+					children: /* @__PURE__ */ jsx(Upload, { className: "text-foreground-muted" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: dropOverlayIcon({ className: "absolute z-20 translate-x-7 translate-y-1 rotate-12" }),
+					children: /* @__PURE__ */ jsx(Image, { className: "text-foreground-muted" })
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", { children: "Drop files to attach" })]
+	});
+}
+//#endregion
+export { ComposerDropOverlay, ComposerDropOverlayLabel, ComposerDropOverlayPrompt };

package/dist/components/composer/composer-drop-overlay.recipe.mjs

@@ -0,0 +1,23 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/composer/composer-drop-overlay.recipe.ts
+const composerDropOverlay = tv({ slots: {
+	dropOverlay: [
+		"absolute inset-0 z-30 flex items-center justify-center",
+		"rounded-container border-[1.5px] border-dashed border-line-seam",
+		"bg-layer-card bg-[linear-gradient(var(--info-soft),var(--info-soft))]"
+	],
+	dropOverlayLabel: [
+		"flex flex-col items-center border-0 p-0",
+		"text-center",
+		"gap-3 font-sans text-callout font-semibold",
+		"text-foreground"
+	],
+	dropOverlayIconCluster: ["relative flex items-center justify-center", "h-10 w-22"],
+	dropOverlayIcon: [
+		"rounded-control p-2",
+		"bg-layer-card shadow-none ring-1 ring-line-hairline",
+		"[&_svg]:size-4"
+	]
+} });
+//#endregion
+export { composerDropOverlay };

package/dist/components/composer/composer-root.d.mts

@@ -0,0 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-root.d.ts
+export type ComposerRootProps = useRender.ComponentProps<"form">;
+export declare function ComposerRoot({ className, render, ...props }: ComposerRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/composer/composer-root.mjs

@@ -0,0 +1,18 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-root.tsx
+const composerRoot = tv({ base: ["relative flex w-full flex-col", "gap-2"] });
+function ComposerRoot({ className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "composer-root",
+		className: composerRoot({ className })
+	};
+	return useRender({
+		defaultTagName: "form",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ComposerRoot };

package/dist/components/composer/composer-suggestion-list.d.mts

@@ -0,0 +1,139 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-suggestion-list.d.ts
+declare const composerSuggestionList: import("tailwind-variants/lite").TVReturnType<{
+  separated: {
+    true: {
+      group: string[];
+    };
+    false: {};
+  };
+  iconVariant: {
+    avatar: {};
+    framed: {
+      icon: string[];
+    };
+    auxiliary: {
+      icon: string[];
+    };
+    inline: {
+      icon: string[];
+    };
+  };
+  metaVariant: {
+    text: {
+      meta: string;
+    };
+    code: {
+      meta: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+  groupLabel: string[];
+  item: string[];
+  content: string[];
+  icon: string[];
+  title: string[];
+  aside: string[];
+  meta: string[];
+}, undefined, {
+  separated: {
+    true: {
+      group: string[];
+    };
+    false: {};
+  };
+  iconVariant: {
+    avatar: {};
+    framed: {
+      icon: string[];
+    };
+    auxiliary: {
+      icon: string[];
+    };
+    inline: {
+      icon: string[];
+    };
+  };
+  metaVariant: {
+    text: {
+      meta: string;
+    };
+    code: {
+      meta: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+  groupLabel: string[];
+  item: string[];
+  content: string[];
+  icon: string[];
+  title: string[];
+  aside: string[];
+  meta: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  separated: {
+    true: {
+      group: string[];
+    };
+    false: {};
+  };
+  iconVariant: {
+    avatar: {};
+    framed: {
+      icon: string[];
+    };
+    auxiliary: {
+      icon: string[];
+    };
+    inline: {
+      icon: string[];
+    };
+  };
+  metaVariant: {
+    text: {
+      meta: string;
+    };
+    code: {
+      meta: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+  groupLabel: string[];
+  item: string[];
+  content: string[];
+  icon: string[];
+  title: string[];
+  aside: string[];
+  meta: string[];
+}>>;
+export type ComposerSuggestionListProps = useRender.ComponentProps<"div">;
+export declare function ComposerSuggestionList({ className, render, ...props }: ComposerSuggestionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ComposerSuggestionListVariantProps = VariantProps<typeof composerSuggestionList>;
+export type ComposerSuggestionGroupProps = useRender.ComponentProps<"div"> & Pick<ComposerSuggestionListVariantProps, "separated">;
+export declare function ComposerSuggestionGroup({ separated, className, render, ...props }: ComposerSuggestionGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionGroupLabelProps = useRender.ComponentProps<"div">;
+export declare function ComposerSuggestionGroupLabel({ className, render, ...props }: ComposerSuggestionGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionOptionProps = useRender.ComponentProps<"div">;
+export declare function ComposerSuggestionOption({ className, render, ...props }: ComposerSuggestionOptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionContentProps = useRender.ComponentProps<"div">;
+export declare function ComposerSuggestionContent({ className, render, ...props }: ComposerSuggestionContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionIconProps = useRender.ComponentProps<"span"> & {
+  variant?: ComposerSuggestionListVariantProps["iconVariant"];
+};
+export declare function ComposerSuggestionIcon({ variant, className, render, ...props }: ComposerSuggestionIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionTitleProps = useRender.ComponentProps<"span">;
+export declare function ComposerSuggestionTitle({ className, render, ...props }: ComposerSuggestionTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionAsideProps = useRender.ComponentProps<"span">;
+export declare function ComposerSuggestionAside({ className, render, ...props }: ComposerSuggestionAsideProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionMetaProps = useRender.ComponentProps<"span"> & {
+  variant?: ComposerSuggestionListVariantProps["metaVariant"];
+};
+export declare function ComposerSuggestionMeta({ variant, className, render, ...props }: ComposerSuggestionMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion