@camox/ui 0.43.0 → 0.45.0

package/dist/components/dialog.d.ts

@@ -1,53 +1,20 @@
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-
 //#region src/components/dialog.d.ts
-declare function Dialog({
-  ...props
-}: Dialog$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogTrigger({
-  ...props
-}: Dialog$1.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogPortal({
-  ...props
-}: Dialog$1.Portal.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogClose({
-  ...props
-}: Dialog$1.Close.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogOverlay({
-  className,
-  ...props
-}: Dialog$1.Backdrop.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogContent({
-  className,
-  children,
-  showCloseButton,
-  forceOverlay,
-  ...props
-}: Dialog$1.Popup.Props & {
+declare function Dialog({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
+declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
+declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function DialogClose({ ...props }: Dialog$1.Close.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, forceOverlay, ...props }: Dialog$1.Popup.Props & {
   showCloseButton?: boolean;
   forceOverlay?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function DialogFooter({
-  className,
-  showCloseButton,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
   showCloseButton?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DialogTitle({
-  className,
-  ...props
-}: Dialog$1.Title.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DialogDescription({
-  className,
-  ...props
-}: Dialog$1.Description.Props): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React.JSX.Element;
 //#endregion
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/dialog.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
 import { XIcon } from "lucide-react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 

package/dist/components/dropdown-menu.d.ts

@@ -1,90 +1,31 @@
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
-
 //#region src/components/dropdown-menu.d.ts
-declare function DropdownMenu({
-  ...props
-}: Menu.Root.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuPortal({
-  ...props
-}: Menu.Portal.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuTrigger({
-  ...props
-}: Menu.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuContent({
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  className,
-  ...props
-}: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuGroup({
-  ...props
-}: Menu.Group.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: Menu.GroupLabel.Props & {
+declare function DropdownMenu({ ...props }: Menu.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: Menu.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: Menu.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: Menu.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: Menu.GroupLabel.Props & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: Menu.Item.Props & {
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: Menu.Item.Props & {
   inset?: boolean;
   variant?: "default" | "destructive";
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSub({
-  ...props
-}: Menu.SubmenuRoot.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: Menu.SubmenuTrigger.Props & {
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: Menu.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: Menu.SubmenuTrigger.Props & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSubContent({
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuContent>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: Menu.CheckboxItem.Props & {
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuRadioGroup({
-  ...props
-}: Menu.RadioGroup.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: Menu.RadioItem.Props & {
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: Menu.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSeparator({
-  className,
-  ...props
-}: Menu.Separator.Props): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 //#endregion
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { Menu } from "@base-ui/react/menu";
 

package/dist/components/favicon-drop-zone.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/components/favicon-drop-zone.d.ts
+/** Why `file` can't be a favicon, or `null` when it can. Mirrors the API's own checks. */
+declare function validateFaviconFile(file: File): "Use a PNG, SVG, or ICO file." | "Favicon must be 500 KB or smaller." | null;
+/**
+ * A large area to drop or browse for a favicon, which previews `previewUrl` in its center.
+ * It only picks the file: saving it is up to the caller.
+ */
+declare function FaviconDropZone({ previewUrl, prompt, disabled, onFileSelected, className }: {
+  previewUrl: string;
+  prompt: string;
+  disabled?: boolean;
+  onFileSelected: (file: File) => void;
+  className?: string;
+}): React.JSX.Element;
+//#endregion
+export { FaviconDropZone, validateFaviconFile };

package/dist/components/favicon-drop-zone.js

@@ -0,0 +1,97 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Upload } from "lucide-react";
+
+//#region src/components/favicon-drop-zone.tsx
+const FAVICON_MIME_TYPES = /* @__PURE__ */ new Set([
+	"image/png",
+	"image/svg+xml",
+	"image/x-icon",
+	"image/vnd.microsoft.icon"
+]);
+const FAVICON_ACCEPT = [...FAVICON_MIME_TYPES, ".ico"].join(",");
+const FAVICON_MAX_BYTES = 512e3;
+/** Why `file` can't be a favicon, or `null` when it can. Mirrors the API's own checks. */
+function validateFaviconFile(file) {
+	if (!FAVICON_MIME_TYPES.has(file.type) && !file.name.toLowerCase().endsWith(".ico")) return "Use a PNG, SVG, or ICO file.";
+	if (file.size > FAVICON_MAX_BYTES) return "Favicon must be 500 KB or smaller.";
+	return null;
+}
+/**
+* A large area to drop or browse for a favicon, which previews `previewUrl` in its center.
+* It only picks the file: saving it is up to the caller.
+*/
+function FaviconDropZone({ previewUrl, prompt, disabled, onFileSelected, className }) {
+	const fileInputRef = React.useRef(null);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const dragCounter = React.useRef(0);
+	const select = (file) => {
+		if (file && !disabled) onFileSelected(file);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		onDragEnter: (event) => {
+			event.preventDefault();
+			dragCounter.current++;
+			setIsDragging(true);
+		},
+		onDragLeave: (event) => {
+			event.preventDefault();
+			dragCounter.current--;
+			if (dragCounter.current === 0) setIsDragging(false);
+		},
+		onDragOver: (event) => event.preventDefault(),
+		onDrop: (event) => {
+			event.preventDefault();
+			dragCounter.current = 0;
+			setIsDragging(false);
+			select(event.dataTransfer.files[0]);
+		},
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: fileInputRef,
+				type: "file",
+				accept: FAVICON_ACCEPT,
+				className: "hidden",
+				onChange: (event) => {
+					select(event.target.files?.[0]);
+					event.target.value = "";
+				}
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled,
+				onClick: () => fileInputRef.current?.click(),
+				className: "hover:bg-accent/50 focus-visible:ring-ring/50 flex w-full flex-col items-center gap-5 rounded-xl border-2 border-dashed px-6 py-10 transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-background flex size-20 items-center justify-center rounded-2xl border shadow-xs",
+					children: /* @__PURE__ */ jsx("img", {
+						src: previewUrl,
+						alt: "",
+						className: "size-12 object-contain"
+					})
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "space-y-1 text-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mx-auto block max-w-72 truncate text-sm font-medium",
+						children: prompt
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground block text-xs",
+						children: "PNG, SVG, or ICO up to 500 KB. Square images work best."
+					})]
+				})]
+			}),
+			isDragging && /* @__PURE__ */ jsxs("div", {
+				className: "bg-background border-primary pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-xl border-3 border-dashed",
+				children: [/* @__PURE__ */ jsx(Upload, { className: "text-primary size-8" }), /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium",
+					children: "Drop to use as favicon"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { FaviconDropZone, validateFaviconFile };

package/dist/components/floating-toolbar.d.ts

@@ -1,9 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/floating-toolbar.d.ts
-declare function FloatingToolbar({
-  className,
-  ...props
-}: React.ComponentProps<"menu">): _$react_jsx_runtime0.JSX.Element;
+declare function FloatingToolbar({ className, ...props }: React.ComponentProps<"menu">): import("react").JSX.Element;
 //#endregion
 export { FloatingToolbar };

package/dist/components/input-group.d.ts

@@ -1,45 +1,20 @@
 import { Button } from "./button.js";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/input-group.d.ts
-declare function InputGroup({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
   align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function InputGroupAddon({
-  className,
-  align,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): _$react_jsx_runtime0.JSX.Element;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
   size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function InputGroupButton({
-  className,
-  type,
-  variant,
-  size,
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
   type?: "button" | "submit" | "reset";
-}): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupText({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
 //#endregion
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-group.js

@@ -1,12 +1,10 @@
-"use client";
-
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
+import { jsx } from "react/jsx-runtime";
 import "react";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/components/input-group.tsx
 function InputGroup({ className, ...props }) {

package/dist/components/input.d.ts

@@ -1,11 +1,5 @@
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/input.d.ts
-declare function Input({
-  className,
-  type,
-  ...props
-}: React.ComponentProps<"input">): _$react_jsx_runtime0.JSX.Element;
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 //#endregion
 export { Input };

package/dist/components/input.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import "react";
 import { jsx } from "react/jsx-runtime";
+import "react";
 import { Input as Input$1 } from "@base-ui/react/input";
 
 //#region src/components/input.tsx

package/dist/components/kbd.d.ts

@@ -1,13 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/kbd.d.ts
-declare function Kbd({
-  className,
-  ...props
-}: React.ComponentProps<"kbd">): _$react_jsx_runtime0.JSX.Element;
-declare function KbdGroup({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
 export { Kbd, KbdGroup };

package/dist/components/label.d.ts

@@ -1,10 +1,5 @@
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/label.d.ts
-declare function Label({
-  className,
-  ...props
-}: React.ComponentProps<"label">): _$react_jsx_runtime0.JSX.Element;
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
 //#endregion
 export { Label };

package/dist/components/label.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import "react";
 import { jsx } from "react/jsx-runtime";
+import "react";
 
 //#region src/components/label.tsx
 function Label({ className, ...props }) {

package/dist/components/message-scroller.d.ts

@@ -0,0 +1,12 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/message-scroller.d.ts
+declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScroller$1.Provider>): React.JSX.Element;
+declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Root>): React.JSX.Element;
+declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Viewport>): React.JSX.Element;
+declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Content>): React.JSX.Element;
+declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScroller$1.Item>): React.JSX.Element;
+declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScroller$1.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/message-scroller.js

@@ -0,0 +1,62 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ArrowDownIcon } from "lucide-react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+
+//#region src/components/message-scroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
+		"data-slot": "message-scroller",
+		className: cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cn("size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
+		"data-slot": "message-scroller-content",
+		className: cn("flex h-max min-h-full flex-col gap-8", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+}
+function MessageScrollerButton({ direction = "end", className, children, render, variant = "secondary", size = "icon-sm", ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		"data-variant": variant,
+		"data-size": size,
+		direction,
+		className: cn("absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/message.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+//#region src/components/message.d.ts
+declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
+  align?: "start" | "end";
+}): React.JSX.Element;
+declare function MessageAvatar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/message.js

@@ -0,0 +1,51 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+
+//#region src/components/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+function Message({ className, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: cn("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-avatar",
+		className: cn("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-content",
+		className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-header",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+}
+
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };