@aircall/blocks 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,17 +1,388 @@
 import * as React from "react";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, SidebarProvider, TabsList, Tooltip, TooltipContent, TooltipTrigger, cn, useSidebar } from "@aircall/ds";
-import { Check, ChevronLeft, ChevronRight, Copy, PanelLeftClose, PanelLeftOpen } from "@aircall/react-icons";
-import { useCallbackRef, useIsMounted, useUnmount } from "@aircall/hooks";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupButton, InputGroupTextarea, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, TabsList, Tooltip, TooltipContent, TooltipTrigger, cn, useSidebar } from "@aircall/ds";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AircallLogo, ArrowUp, Check, ChevronLeft, ChevronRight, Copy, Ellipsis, LockKeyhole, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, TriangleAlert } from "@aircall/react-icons";
 import { cva } from "class-variance-authority";
+import { useCallbackRef, useControllableState, useIsMounted, useUnmount } from "@aircall/hooks";
+import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
+//#region src/components/empty-state.tsx
+/** Generic root. Anchor of the family + escape hatch for ad-hoc empty states. */
+const EmptyState = React.forwardRef((componentProps, forwardRef) => {
+	return /* @__PURE__ */ jsx(Empty, {
+		ref: forwardRef,
+		...componentProps
+	});
+});
+EmptyState.displayName = "EmptyState";
+/** Groups the media, title and description with the design's spacing. */
+const EmptyStateHeader = React.forwardRef((componentProps, forwardRef) => {
+	return /* @__PURE__ */ jsx(EmptyHeader, {
+		ref: forwardRef,
+		...componentProps
+	});
+});
+EmptyStateHeader.displayName = "EmptyStateHeader";
+/** Decorative media slot (icon/avatar). Hidden from assistive tech. */
+const EmptyStateMedia = React.forwardRef((componentProps, forwardRef) => {
+	const { children, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(EmptyMedia, {
+		ref: forwardRef,
+		variant: "icon",
+		"aria-hidden": true,
+		...props,
+		children
+	});
+});
+EmptyStateMedia.displayName = "EmptyStateMedia";
+const EmptyStateTitle = React.forwardRef((componentProps, forwardRef) => {
+	return /* @__PURE__ */ jsx(EmptyTitle, {
+		ref: forwardRef,
+		...componentProps
+	});
+});
+EmptyStateTitle.displayName = "EmptyStateTitle";
+const EmptyStateDescription = React.forwardRef((componentProps, forwardRef) => {
+	return /* @__PURE__ */ jsx(EmptyDescription, {
+		ref: forwardRef,
+		...componentProps
+	});
+});
+EmptyStateDescription.displayName = "EmptyStateDescription";
+/**
+* Row of action buttons below the header. Lays buttons out horizontally
+* (wrapping when needed), matching the design. Place an `EmptyStateExternalLink`
+* link as a sibling after it — not inside — to sit on its own line below.
+*/
+const EmptyStateActions = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(EmptyContent, {
+		ref: forwardRef,
+		className: cn("flex-row flex-wrap justify-center gap-3", className),
+		...props
+	});
+});
+EmptyStateActions.displayName = "EmptyStateActions";
+const EmptyStateButton = React.forwardRef((componentProps, forwardRef) => {
+	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
+		size: "default",
+		...componentProps
+	});
+});
+EmptyStateButton.displayName = "EmptyStateButton";
+const EmptyStateExternalLink = React.forwardRef((componentProps, forwardRef) => {
+	const { href, children = "Learn more", ...props } = componentProps;
+	return /* @__PURE__ */ jsx(EmptyStateButton, {
+		ref: forwardRef,
+		variant: "link",
+		render: /* @__PURE__ */ jsx("a", {
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}),
+		...props,
+		children
+	});
+});
+EmptyStateExternalLink.displayName = "EmptyStateExternalLink";
+function createEmptyStateVariant(config) {
+	const Root = React.forwardRef((componentProps, forwardRef) => /* @__PURE__ */ jsx(EmptyState, {
+		ref: forwardRef,
+		role: config.role,
+		...componentProps
+	}));
+	Root.displayName = `${config.name}EmptyState`;
+	const Media = React.forwardRef((componentProps, forwardRef) => /* @__PURE__ */ jsx(EmptyStateMedia, {
+		ref: forwardRef,
+		...componentProps,
+		children: config.icon
+	}));
+	Media.displayName = `${config.name}Media`;
+	const Title = React.forwardRef(({ children, ...componentProps }, forwardRef) => /* @__PURE__ */ jsx(EmptyStateTitle, {
+		ref: forwardRef,
+		...componentProps,
+		children: children ?? config.title
+	}));
+	Title.displayName = `${config.name}Title`;
+	const Description = React.forwardRef(({ children, ...componentProps }, forwardRef) => /* @__PURE__ */ jsx(EmptyStateDescription, {
+		ref: forwardRef,
+		...componentProps,
+		children: children ?? config.description
+	}));
+	Description.displayName = `${config.name}Description`;
+	return {
+		Root,
+		Media,
+		Title,
+		Description
+	};
+}
+
+//#endregion
+//#region src/components/coming-soon.tsx
+/**
+* ComingSoon — empty state shown when a feature exists in the UI but is not yet
+* available. Compose it from its parts:
+*
+* ```tsx
+* <ComingSoonEmptyState>
+*   <EmptyStateHeader>
+*     <ComingSoonMedia />
+*     <ComingSoonTitle />
+*     <ComingSoonDescription />
+*   </EmptyStateHeader>
+*   <EmptyStateActions>
+*     <EmptyStateButton variant="outline" onClick={goBack}>Go back</EmptyStateButton>
+*     <EmptyStateExternalLink href={docsUrl} />
+*   </EmptyStateActions>
+* </ComingSoonEmptyState>
+* ```
+*
+* `ComingSoonTitle` / `ComingSoonDescription` render the design copy by default;
+* pass children to override (e.g. for i18n).
+*/
+const ComingSoon = createEmptyStateVariant({
+	name: "ComingSoon",
+	icon: /* @__PURE__ */ jsx(Sprout, {}),
+	title: "Coming soon!",
+	description: "You’ll be able to access this feature in the near future."
+});
+const ComingSoonEmptyState = ComingSoon.Root;
+const ComingSoonMedia = ComingSoon.Media;
+const ComingSoonTitle = ComingSoon.Title;
+const ComingSoonDescription = ComingSoon.Description;
+
+//#endregion
+//#region src/components/restricted-access.tsx
+/**
+* RestrictedAccess — shown when the user lacks permission to view a page.
+* Pair it with an `EmptyStateExternalLink` for the "Learn more" action.
+*/
+const RestrictedAccess = createEmptyStateVariant({
+	name: "RestrictedAccess",
+	icon: /* @__PURE__ */ jsx(LockKeyhole, {}),
+	title: "You don’t have access to this page.",
+	description: "Contact an admin on your team to get access."
+});
+const RestrictedAccessEmptyState = RestrictedAccess.Root;
+const RestrictedAccessMedia = RestrictedAccess.Media;
+const RestrictedAccessTitle = RestrictedAccess.Title;
+const RestrictedAccessDescription = RestrictedAccess.Description;
+
+//#endregion
+//#region src/components/not-found.tsx
+/**
+* NotFound — shown when a page/route cannot be found. Pair it with an
+* `EmptyStateButton` for the navigation action (e.g. "Go to inbox").
+*/
+const NotFound = createEmptyStateVariant({
+	name: "NotFound",
+	icon: /* @__PURE__ */ jsx(Search, {}),
+	title: "We couldn’t find that page",
+	description: "It may have been moved, deleted, or the link may be incorrect."
+});
+const NotFoundEmptyState = NotFound.Root;
+const NotFoundMedia = NotFound.Media;
+const NotFoundTitle = NotFound.Title;
+const NotFoundDescription = NotFound.Description;
+
+//#endregion
+//#region src/components/no-data.tsx
+/**
+* NoData — shown when a search or filter returns no results. Pair it with an
+* `EmptyStateButton` for the "Reset" action. Appears in response to a user
+* action, so it announces politely via `role="status"`.
+*/
+const NoData = createEmptyStateVariant({
+	name: "NoData",
+	icon: /* @__PURE__ */ jsx(Search, {}),
+	title: "No results matching",
+	description: "Try resetting your search or removing a filter.",
+	role: "status"
+});
+const NoDataEmptyState = NoData.Root;
+const NoDataMedia = NoData.Media;
+const NoDataTitle = NoData.Title;
+const NoDataDescription = NoData.Description;
+
+//#endregion
+//#region src/components/no-support.tsx
+/**
+* NoSupport — shown when the current browser can't render a page. Pair it with
+* an `EmptyStateExternalLink` for the "Learn more" action.
+*/
+const NoSupport = createEmptyStateVariant({
+	name: "NoSupport",
+	icon: /* @__PURE__ */ jsx(Settings, {}),
+	title: "We can’t support this page",
+	description: "Try updating your browser to the latest version."
+});
+const NoSupportEmptyState = NoSupport.Root;
+const NoSupportMedia = NoSupport.Media;
+const NoSupportTitle = NoSupport.Title;
+const NoSupportDescription = NoSupport.Description;
+
+//#endregion
+//#region src/components/unknown-error.tsx
+/**
+* UnknownError — shown when content fails to load unexpectedly. Pair it with an
+* `EmptyStateButton` (primary) for the "Try again" action. As an error state it
+* announces assertively via `role="alert"`.
+*/
+const UnknownError = createEmptyStateVariant({
+	name: "UnknownError",
+	icon: /* @__PURE__ */ jsx(TriangleAlert, {}),
+	title: "We couldn’t load this page",
+	description: "Something went wrong while loading. Try again to load the data.",
+	role: "alert"
+});
+const UnknownErrorEmptyState = UnknownError.Root;
+const UnknownErrorMedia = UnknownError.Media;
+const UnknownErrorTitle = UnknownError.Title;
+const UnknownErrorDescription = UnknownError.Description;
+
+//#endregion
+//#region src/components/chatbot-page.tsx
+const ChatbotPage = React.forwardRef((componentProps, forwardRef) => {
+	const { children, className } = componentProps;
+	return /* @__PURE__ */ jsx(SidebarProvider, {
+		ref: forwardRef,
+		className: cn("!min-h-0 h-full", className),
+		style: { "--sidebar-width": "14rem" },
+		children
+	});
+});
+ChatbotPage.displayName = "ChatbotPage";
+
+//#endregion
+//#region src/components/chatbot-sidebar.tsx
+const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
+	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", className } = componentProps;
+	return /* @__PURE__ */ jsx(Sidebar, {
+		ref: forwardRef,
+		collapsible: "none",
+		className,
+		children: /* @__PURE__ */ jsxs(SidebarContent, { children: [/* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			isActive: !activeConversationId || !conversations.some((c) => c.id === activeConversationId),
+			onClick: onNewChat,
+			children: [/* @__PURE__ */ jsx(Plus, {}), /* @__PURE__ */ jsx("span", { children: "New chat" })]
+		}) }) }) }), conversations.length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: recentLabel }), /* @__PURE__ */ jsx(SidebarMenu, { children: conversations.map((conversation) => {
+			const isActive = conversation.id === activeConversationId;
+			return /* @__PURE__ */ jsx(SidebarMenuItem, { children: renderConversationMenuContent ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+				/* @__PURE__ */ jsx(SidebarMenuButton, {
+					isActive,
+					onClick: () => onSelectConversation?.(conversation.id),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: conversation.title
+					})
+				}),
+				/* @__PURE__ */ jsx(SidebarMenuAction, {
+					showOnHover: true,
+					render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {}),
+					"aria-label": `Options for ${conversation.title}`,
+					children: /* @__PURE__ */ jsx(Ellipsis, {})
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuContent, {
+					side: "right",
+					children: renderConversationMenuContent(conversation)
+				})
+			] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
+				isActive,
+				onClick: () => onSelectConversation?.(conversation.id),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					children: conversation.title
+				})
+			}) }, conversation.id);
+		}) })] })] })
+	});
+});
+ChatbotSidebar.displayName = "ChatbotSidebar";
+
+//#endregion
+//#region src/components/chatbot-input.tsx
+const textareaVariants = cva([
+	"min-h-8 py-1.5 pr-2 pl-0 text-sm",
+	"placeholder:text-neutral-500",
+	"disabled:bg-transparent dark:disabled:bg-transparent disabled:opacity-100",
+	"[scrollbar-color:rgba(0,0,0,0.1)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/10 [&::-webkit-scrollbar-track]:bg-transparent"
+], {
+	variants: { size: {
+		default: "max-h-20",
+		large: "max-h-32 min-h-20"
+	} },
+	defaultVariants: { size: "default" }
+});
+function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder = "Ask anything...", loading = false, size = "default", disabled, ...textareaProps }) {
+	const [currentValue = "", setCurrentValue] = useControllableState({
+		prop: value,
+		defaultProp: "",
+		onChange: onValueChange
+	});
+	const hasValue = currentValue.trim().length > 0;
+	const handleChange = (event) => {
+		setCurrentValue(event.target.value);
+	};
+	const submit = () => {
+		if (loading || disabled || !hasValue) return;
+		onSubmit?.(currentValue);
+		setCurrentValue("");
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			submit();
+		}
+		textareaProps.onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "chatbot-input",
+		"data-loading": loading || void 0,
+		className: cn("h-auto items-end gap-2 overflow-clip rounded-3xl bg-background py-2 pr-2 pl-6", "shadow-[0px_0px_8px_0px_var(--input)]", "hover:shadow-[0px_0px_8px_0px_var(--ring)]", "has-[[data-slot=input-group-control]:focus-visible]:border-green-400", "has-[[data-slot=input-group-control]:focus-visible]:ring-0", "has-[[data-slot=input-group-control]:focus-visible]:shadow-[0px_0px_8px_0px_var(--ring)]", className),
+		"aria-disabled": disabled || void 0,
+		children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
+			rows: 1,
+			placeholder,
+			"aria-label": "Message",
+			...textareaProps,
+			value: currentValue,
+			disabled,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			className: cn(textareaVariants({ size }))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-2",
+			children: loading ? /* @__PURE__ */ jsx(InputGroupButton, {
+				variant: "secondary",
+				size: "icon",
+				className: "rounded-full",
+				"aria-label": "Stop generating",
+				disabled,
+				onClick: onStop,
+				children: /* @__PURE__ */ jsx(Square, {})
+			}) : /* @__PURE__ */ jsx(InputGroupButton, {
+				variant: hasValue ? "default" : "ghost",
+				size: "icon",
+				className: "rounded-full",
+				"aria-label": "Send message",
+				disabled: disabled || !hasValue,
+				onClick: submit,
+				children: /* @__PURE__ */ jsx(ArrowUp, {})
+			})
+		})]
+	});
+}
+
+//#endregion
 //#region src/hooks/use-copy-to-clipboard.ts
 function useCopyToClipboard(value, { timeout = 5e3, onCopied } = {}) {
 	const [copied, setCopied] = useState(false);
-	const timerRef = useRef();
+	const timerRef = useRef(void 0);
 	const getIsMounted = useIsMounted();
 	const onCopiedRef = useCallbackRef(onCopied);
 	useUnmount(() => clearTimeout(timerRef.current));
@@ -49,7 +420,8 @@ function useCopyButtonContext() {
 	if (ctx === null) throw new Error("CopyButtonIcon and CopyButtonLabel must be rendered inside a CopyButton.");
 	return ctx;
 }
-function CopyButton({ value, timeout, onCopied, variant = "outline", children, ...buttonProps }) {
+const CopyButton = React.forwardRef((componentProps, forwardRef) => {
+	const { value, timeout, onCopied, variant = "outline", children, ...buttonProps } = componentProps;
 	const { copy, copied } = useCopyToClipboard(value, {
 		timeout,
 		onCopied
@@ -57,6 +429,7 @@ function CopyButton({ value, timeout, onCopied, variant = "outline", children, .
 	return /* @__PURE__ */ jsx(CopyButtonContext.Provider, {
 		value: { copied },
 		children: /* @__PURE__ */ jsx(Button, {
+			ref: forwardRef,
 			onClick: () => {
 				copy();
 			},
@@ -65,17 +438,66 @@ function CopyButton({ value, timeout, onCopied, variant = "outline", children, .
 			children
 		})
 	});
-}
-function CopyButtonIcon({ className }) {
+});
+CopyButton.displayName = "CopyButton";
+const CopyButtonIcon = React.forwardRef((componentProps, forwardRef) => {
+	const { className } = componentProps;
 	const { copied } = useCopyButtonContext();
-	return /* @__PURE__ */ jsx(copied ? Check : Copy, { className });
-}
-function CopyButtonLabel({ label = "Copy", copiedLabel = "Copied", className }) {
+	return /* @__PURE__ */ jsx(copied ? Check : Copy, {
+		ref: forwardRef,
+		className
+	});
+});
+CopyButtonIcon.displayName = "CopyButtonIcon";
+const CopyButtonLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { label = "Copy", copiedLabel = "Copied", className } = componentProps;
 	const { copied } = useCopyButtonContext();
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		className: cn(className),
 		children: copied ? copiedLabel : label
 	});
+});
+CopyButtonLabel.displayName = "CopyButtonLabel";
+
+//#endregion
+//#region src/components/chatbot-panel-suggestion.tsx
+function ChatbotPanelSuggestion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "chatbot-panel-suggestion",
+		variant: "ghost",
+		className: cn("h-auto max-w-[280px] text-left rounded-[18px] border border-primary px-3 py-1.5", "bg-background text-primary whitespace-normal", "hover:bg-[color-mix(in_srgb,#5BF1B2_20%,var(--background))] hover:text-primary", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/chatbot-user-message.tsx
+function ChatbotUserMessage({ className, children, ...props }) {
+	const [expanded, setExpanded] = useState(false);
+	const [showToggle, setShowToggle] = useState(false);
+	const contentRef = useRef(null);
+	useLayoutEffect(() => {
+		if (expanded || !contentRef.current) return;
+		const el = contentRef.current;
+		setShowToggle(el.scrollHeight > el.clientHeight);
+	}, [children, expanded]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chatbot-user-message",
+		className: cn("ml-auto", "w-fit max-w-[80%]", "rounded-[18px]", "bg-green-200 text-foreground", "px-4 py-2", "text-sm", "break-words", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: cn(!expanded && "line-clamp-6"),
+			children
+		}), showToggle && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			onClick: () => setExpanded((prev) => !prev),
+			className: "mt-1 block w-full cursor-pointer text-right text-xs font-semibold text-foreground/70 hover:text-foreground",
+			children: expanded ? "Show less" : "Show more"
+		})]
+	});
 }
 
 //#endregion
@@ -144,46 +566,63 @@ DashboardStandalonePageContent.displayName = "DashboardStandalonePageContent";
 
 //#endregion
 //#region src/components/dashboard-page.tsx
-function DashboardPage({ className, ...props }) {
+const DashboardPage = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-page",
 		className: cn("flex flex-col h-screen bg-page-background p-2 gap-2", className),
 		...props
 	});
-}
-function DashboardPageBanner({ className, ...props }) {
+});
+DashboardPage.displayName = "DashboardPage";
+const DashboardPageBanner = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-page-banner",
 		className: cn("-mt-2 -mx-2", className),
 		...props
 	});
-}
-function DashboardPageContent({ className, ...props }) {
+});
+DashboardPageBanner.displayName = "DashboardPageBanner";
+const DashboardPageContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-page-content",
 		className: cn("flex-1 min-w-0 flex flex-col bg-background rounded-xl border border-border overflow-hidden", "[&:has([data-slot=dph-tabs])>[data-slot=dph]]:border-b-0", className),
 		...props
 	});
-}
-function DashboardPageMain({ className, ...props }) {
+});
+DashboardPageContent.displayName = "DashboardPageContent";
+const DashboardPageMain = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("main", {
+		ref: forwardRef,
 		"data-slot": "dashboard-page-main",
 		className: cn("flex-1 min-h-0 overflow-auto py-4 px-6", className),
 		...props
 	});
-}
-function DashboardPageTabs({ className, ...props }) {
+});
+DashboardPageMain.displayName = "DashboardPageMain";
+const DashboardPageTabs = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(TabsList, {
+		ref: forwardRef,
 		...props,
 		"data-slot": "dph-tabs",
 		className: cn("flex w-full justify-start gap-0 px-6 border-b border-border rounded-none bg-transparent", "[&>[data-slot=tabs-trigger]]:flex-none", "[&>[data-slot=tabs-trigger]]:rounded-none", "[&>[data-slot=tabs-trigger]]:after:hidden", "[&>[data-slot=tabs-trigger]]:border-b-2", "[&>[data-slot=tabs-trigger]]:border-b-transparent", "[&>[data-slot=tabs-trigger]]:-mb-px", "[&>[data-slot=tabs-trigger][data-active]]:border-b-foreground", className)
 	});
-}
+});
+DashboardPageTabs.displayName = "DashboardPageTabs";
 
 //#endregion
 //#region src/components/dashboard-page-header.tsx
-function DashboardPageHeader({ className, children, ...props }) {
+const DashboardPageHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph",
 		className: cn("@container bg-background border-b border-border w-full", className),
 		...props,
@@ -193,77 +632,105 @@ function DashboardPageHeader({ className, children, ...props }) {
 			children
 		})
 	});
-}
-function DashboardPageHeaderNav({ className, children, ...props }) {
+});
+DashboardPageHeader.displayName = "DashboardPageHeader";
+const DashboardPageHeaderNav = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-nav",
 		className: cn("[grid-area:nav] flex items-center gap-1", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderNavBack({ children, ...props }) {
+});
+DashboardPageHeaderNav.displayName = "DashboardPageHeaderNav";
+const DashboardPageHeaderNavBack = React.forwardRef((componentProps, forwardRef) => {
+	const { children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Button, {
+		ref: forwardRef,
 		variant: "ghost",
 		size: "sm",
 		nativeButton: false,
 		...props,
 		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), children]
 	});
-}
-function DashboardPageHeaderPrefix({ className, children, ...props }) {
+});
+DashboardPageHeaderNavBack.displayName = "DashboardPageHeaderNavBack";
+const DashboardPageHeaderPrefix = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-prefix",
 		className: cn("[grid-area:prefix] flex shrink-0 px-2 pt-2 items-center justify-center self-start", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderTitleGroup({ className, children, ...props }) {
+});
+DashboardPageHeaderPrefix.displayName = "DashboardPageHeaderPrefix";
+const DashboardPageHeaderTitleGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-title-group",
 		className: cn("[grid-area:info] flex min-w-0 flex-col self-center pl-2", "group-has-[[data-slot=dph-prefix]]/dph:pl-0", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderTitle({ size = "lg", className, children, ...props }) {
+});
+DashboardPageHeaderTitleGroup.displayName = "DashboardPageHeaderTitleGroup";
+const DashboardPageHeaderTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { size = "lg", className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("h1", {
+		ref: forwardRef,
 		"data-slot": "dph-title",
 		className: cn("[grid-area:info] self-center pl-2 group-has-[[data-slot=dph-prefix]]/dph:pl-0", "[[data-slot=dph-title-group]_&]:p-0", "[[data-slot=dph-title-group]_&]:self-auto", "truncate text-foreground", size === "lg" ? "text-3xl font-bold" : "text-xl font-bold", "leading-10", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderSubtitle({ className, children, ...props }) {
+});
+DashboardPageHeaderTitle.displayName = "DashboardPageHeaderTitle";
+const DashboardPageHeaderSubtitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-subtitle",
 		className: cn("flex flex-col items-start gap-0.5 max-w-xl", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderDescription({ className, children, ...props }) {
+});
+DashboardPageHeaderSubtitle.displayName = "DashboardPageHeaderSubtitle";
+const DashboardPageHeaderDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-description",
 		className: cn("text-sm text-muted-foreground line-clamp-3 -mt-1", className),
 		...props,
 		children
 	});
-}
-function DashboardPageHeaderActions({ className, children, ...props }) {
+});
+DashboardPageHeaderDescription.displayName = "DashboardPageHeaderDescription";
+const DashboardPageHeaderActions = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dph-actions",
 		className: cn("[grid-area:actions] flex items-center gap-2 self-start pl-2", className),
 		...props,
 		children
 	});
-}
-const DashboardPageHeaderAction = React.forwardRef(({ size = "lg", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
-	ref,
-	size,
-	...props
-}));
+});
+DashboardPageHeaderActions.displayName = "DashboardPageHeaderActions";
+const DashboardPageHeaderAction = React.forwardRef((componentProps, forwardRef) => {
+	const { size = "lg", ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
+		size,
+		...props
+	});
+});
 DashboardPageHeaderAction.displayName = "DashboardPageHeaderAction";
 
 //#endregion
@@ -283,14 +750,16 @@ const PRODUCT_BADGE_LABEL = {
 };
 function createProductBadge(type) {
 	const label = PRODUCT_BADGE_LABEL[type];
-	function ProductBadge({ className, ...props }) {
+	const ProductBadge = React.forwardRef((componentProps, forwardRef) => {
+		const { className, ...props } = componentProps;
 		return /* @__PURE__ */ jsx(Badge, {
+			ref: forwardRef,
 			"data-slot": `badge-${type}`,
 			className: cn(productBadgeVariants({ type }), className),
 			...props,
 			children: label
 		});
-	}
+	});
 	ProductBadge.displayName = label.replace(/\s+/g, "") + "Badge";
 	return ProductBadge;
 }
@@ -303,15 +772,18 @@ const DeprecatedBadge = createProductBadge("deprecated");
 /** Blue pill — user is in a trial period (same blue family as Beta) */
 const TrialBadge = createProductBadge("trial");
 /** Charcoal pill — Professional tier (no gradient; solid secondary Badge) */
-function ProfessionalBadge({ className, ...props }) {
+const ProfessionalBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Badge, {
+		ref: forwardRef,
 		"data-slot": "badge-professional",
 		tone: "dark",
 		color: "charcoal",
 		...props,
 		children: "Professional"
 	});
-}
+});
+ProfessionalBadge.displayName = "ProfessionalBadge";
 const roleBadgeVariants = cva(GRADIENT_BASE, { variants: { role: {
 	agent: "[--badge-accent:var(--color-yellow-400)]",
 	supervisor: "[--badge-accent:var(--color-blue-500)]",
@@ -324,19 +796,560 @@ const ROLE_BADGE_LABEL = {
 	admin: "Admin",
 	owner: "Owner"
 };
-function RoleBadge({ role, className, ...props }) {
+const RoleBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { role, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Badge, {
+		ref: forwardRef,
 		"data-slot": `badge-${role}`,
 		className: cn(roleBadgeVariants({ role }), className),
 		...props,
 		children: ROLE_BADGE_LABEL[role]
 	});
+});
+RoleBadge.displayName = "RoleBadge";
+
+//#endregion
+//#region src/components/chatbot-panel-trigger.tsx
+/**
+* Floating trigger that shows / hides the chatbot panel.
+*
+* Rests as a 40px icon-only circle and expands into a pill that reveals its
+* label on hover and keyboard focus. The four Figma states map to real CSS
+* pseudo-states: default (rest), hover, focus (`:focus-visible` ring) and
+* pressed (`:active`, dimmed to 60%).
+*/
+function ChatbotPanelTrigger({ children = "Ask anything", icon = /* @__PURE__ */ jsx(AircallLogo, {}), className, ...buttonProps }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "chatbot-panel-trigger",
+		className: cn("h-10 min-w-10 gap-0 rounded-full px-[9px] text-base", "border-white/20 bg-clip-border", "bg-green-600 shadow-[0px_0px_6px_0px_var(--color-green-500)]", "hover:bg-[color-mix(in_srgb,var(--color-green-600)_90%,white)]", "hover:shadow-[0px_0px_6px_0px_var(--color-green-500),0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)]", "focus-visible:shadow-none focus-visible:ring-[3px] focus-visible:ring-[color-mix(in_srgb,var(--color-green-400)_40%,transparent)]", "active:bg-green-600 active:shadow-[0px_0px_4px_0px_var(--color-green-400)]", className),
+		...buttonProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "grid size-5 shrink-0 place-items-center [&_svg]:size-5",
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("max-w-0 overflow-hidden opacity-0 transition-[max-width,opacity] duration-200", "group-hover/button:max-w-[12rem] group-hover/button:opacity-100", "group-focus-visible/button:max-w-[12rem] group-focus-visible/button:opacity-100", "group-active/button:max-w-[12rem] group-active/button:opacity-100"),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "block pl-1 leading-6 whitespace-nowrap",
+				children
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/form/form-context.ts
+/**
+* TanStack Form contexts for `@aircall/blocks`.
+*
+* - `fieldContext` / `formContext` — pass to `createFormHook` when extending `useForm` with custom field or form components.
+* - `useFieldContext<T>()` — read the bound field's value, meta, and handlers inside a custom field component.
+* - `useFormContext()` — read form-level state (isDirty, isSubmitting, …) inside a custom form component.
+*
+* @example
+* // Extending useForm with a custom SwitchField
+* const { useAppForm } = createFormHook({ fieldContext, formContext, fieldComponents: { SwitchField }, formComponents: {} })
+*/
+const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();
+
+//#endregion
+//#region src/components/card-save-bar.tsx
+function CardSaveBar({ submitLabel = "Save changes", savingLabel = "Saving…", resetLabel = "Discard" }) {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(form.Subscribe, {
+		selector: (s) => ({
+			isDirty: s.isDirty,
+			isSubmitting: s.isSubmitting,
+			canSubmit: s.canSubmit
+		}),
+		children: ({ isDirty, isSubmitting, canSubmit }) => /* @__PURE__ */ jsx("div", {
+			className: cn("grid transition-[grid-template-rows] duration-300 ease-in-out", isDirty ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-end gap-2 border-t px-6 py-3",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						onClick: () => form.reset(),
+						disabled: !isDirty || isSubmitting,
+						children: resetLabel
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: !isDirty || !canSubmit || isSubmitting,
+						children: isSubmitting ? savingLabel : submitLabel
+					})]
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/submit-button.tsx
+function SubmitButton({ children = "Submit", loadingLabel, className, ...buttonProps }) {
+	return /* @__PURE__ */ jsx(useFormContext().Subscribe, {
+		selector: (s) => ({
+			isSubmitting: s.isSubmitting,
+			canSubmit: s.canSubmit
+		}),
+		children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			disabled: !canSubmit || isSubmitting,
+			className: cn(className),
+			...buttonProps,
+			children: isSubmitting ? loadingLabel ?? "Saving…" : children
+		})
+	});
+}
+
+//#endregion
+//#region src/form/use-form.ts
+/**
+* Pre-configured TanStack Form hook for `@aircall/blocks`.
+*
+* Fields are built with the composable, typed `Form*Field` wrappers (e.g. `FormSelectField`),
+* which take the `form` as a prop — there are no registered `fieldComponents`. Only the
+* form-level UI (`SubmitButton`, `CardSaveBar`) is registered, so it's available as
+* `form.SubmitButton` / `form.CardSaveBar` inside `form.AppForm`.
+*
+* `CommonForm` is the full form object — use it directly or extend it:
+* - `CommonForm.useAppForm` — primary hook; types inferred from `defaultValues`
+* - `CommonForm.withForm` — HOC equivalent for higher-order function patterns
+*
+* @example
+* const form = useForm({ defaultValues: { name: '' }, onSubmit: async ({ value }) => save(value) })
+*/
+const CommonForm = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {},
+	formComponents: {
+		SubmitButton,
+		CardSaveBar
+	}
+});
+const useForm = CommonForm.useAppForm;
+const { withForm } = CommonForm;
+
+//#endregion
+//#region src/form/field-errors.ts
+/**
+* Normalize a TanStack Form field's `meta.errors` into the `{ message }[]` shape
+* that `@aircall/ds`'s `FieldError` expects.
+*
+* Errors come from two validator sources with different shapes:
+* - per-field validators return plain strings (e.g. `'Email is required'`)
+* - standard-schema validators (e.g. Zod on `useForm`) return issue **objects** with a `message`
+*
+* Both must render their human-readable text — never `"[object Object]"`.
+*/
+function toFieldErrors(errors) {
+	return errors.map((error) => ({ message: typeof error === "string" ? error : error?.message ?? String(error) }));
+}
+
+//#endregion
+//#region src/components/form-field.tsx
+function FormFieldShell({ label, description, children }) {
+	const errors = useFieldContext().state.meta.errors;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-invalid": errors.length > 0 ? true : void 0,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			children,
+			/* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) })
+		]
+	});
+}
+/**
+* Shared runtime binder for the per-primitive wrappers (FormSelectField, FormInputField, …).
+* Field-name/value/validator typing is enforced at each wrapper's boundary; this just renders
+* the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
+*/
+function FormFieldBase(props) {
+	const { form, name, validators, label, description, buildControl, children } = props;
+	const AppField = form.AppField;
+	return /* @__PURE__ */ jsx(AppField, {
+		name,
+		validators,
+		children: (field) => /* @__PURE__ */ jsx(FormFieldShell, {
+			label,
+			description,
+			children: children(field, buildControl(field))
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form-select-field.tsx
+function selectControl(field) {
+	return {
+		selectProps: {
+			value: field.state.value || null,
+			onValueChange: (value) => field.handleChange(value ?? "")
+		},
+		selectTriggerProps: {
+			onBlur: field.handleBlur,
+			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+		}
+	};
+}
+/**
+* Select field wrapper. Owns the binding + shared `Field/Label/Error` shell, and hands the
+* consumer pre-wired `selectProps` / `selectTriggerProps` to spread onto `@aircall/ds` Select
+* primitives — trigger, value, and content stay fully composable (Combobox-style triggers too).
+*
+* Typing is derived from the threaded `form`: `name` is restricted to the form's **string**
+* fields, and `validators` infer the field value — identical to using `form.AppField` directly.
+*
+* @example
+* <FormSelectField form={form} name="language" label="Language" validators={{ onChange }}>
+*   {(field, { selectProps, selectTriggerProps }) => (
+*     <Select {...selectProps}>
+*       <SelectTrigger {...selectTriggerProps}><SelectValue placeholder="Pick one" /></SelectTrigger>
+*       <SelectContent>{options}</SelectContent>
+*     </Select>
+*   )}
+* </FormSelectField>
+*/
+function FormSelectField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: selectControl
+	});
+}
+
+//#endregion
+//#region src/components/form-input-field.tsx
+function inputControl(field) {
+	return { inputProps: {
+		value: field.state.value ?? "",
+		onChange: (event) => field.handleChange(event.target.value),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* Text-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with an `inputProps` bundle. Compose the input yourself (add adornments, counters, prefixes).
+* `name` is restricted to the form's **string** fields.
+*
+* @example
+* <FormInputField form={form} name="email" label="Email" validators={{ onChange }}>
+*   {(field, { inputProps }) => <Input {...inputProps} type="email" placeholder="you@co.com" />}
+* </FormInputField>
+*/
+function FormInputField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: inputControl
+	});
+}
+
+//#endregion
+//#region src/components/form-combobox-field.tsx
+function comboboxControl(field) {
+	return {
+		comboboxProps: {
+			value: field.state.value || null,
+			onValueChange: (value) => field.handleChange(value ?? "")
+		},
+		comboboxInputProps: {
+			onBlur: field.handleBlur,
+			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+		}
+	};
+}
+/**
+* Combobox (searchable single-select) field wrapper for **string-valued** fields. Same threaded-
+* `form` typing and shared shell as the other wrappers; the render-prop hands you `comboboxProps`
+* and `comboboxInputProps` to spread, leaving the input, trigger, grouping, and item rendering
+* entirely up to you — the case that motivated the render-prop API.
+*
+* @example
+* <FormComboboxField form={form} name="framework" label="Framework" validators={{ onChange }}>
+*   {(field, { comboboxProps, comboboxInputProps }) => (
+*     <Combobox items={FRAMEWORKS} {...comboboxProps}>
+*       <ComboboxInput {...comboboxInputProps} placeholder="Search…" />
+*       <ComboboxContent>
+*         <ComboboxEmpty>No match.</ComboboxEmpty>
+*         <ComboboxList>{item => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
+*       </ComboboxContent>
+*     </Combobox>
+*   )}
+* </FormComboboxField>
+*/
+function FormComboboxField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: comboboxControl
+	});
+}
+
+//#endregion
+//#region src/components/form-multi-combobox-field.tsx
+function multiComboboxControl(field) {
+	return {
+		comboboxProps: {
+			value: field.state.value ?? [],
+			onValueChange: (values) => field.handleChange(values)
+		},
+		comboboxInputProps: {
+			onBlur: field.handleBlur,
+			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+		}
+	};
+}
+/**
+* Multi-select combobox field wrapper — same threaded-`form` typing and shared shell as
+* `FormSelectField`, with `comboboxProps` / `comboboxInputProps` bundles. `name` is restricted
+* to the form's **string[]** fields — a string/number `name` is a type error.
+*
+* @example
+* <FormMultiComboboxField form={form} name="tags" label="Tags" validators={{ onChange }}>
+*   {(field, { comboboxProps, comboboxInputProps }) => (
+*     <Combobox multiple items={items} {...comboboxProps}>
+*       <ComboboxChips><ComboboxInput {...comboboxInputProps} /></ComboboxChips>
+*     </Combobox>
+*   )}
+* </FormMultiComboboxField>
+*/
+function FormMultiComboboxField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: multiComboboxControl
+	});
+}
+
+//#endregion
+//#region src/components/form-textarea-field.tsx
+function textareaControl(field) {
+	return { textareaProps: {
+		value: field.state.value ?? "",
+		onChange: (event) => field.handleChange(event.target.value),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* Multiline text-input field wrapper — same threaded-`form` typing and shared shell as
+* `FormSelectField`, with a `textareaProps` bundle. Compose the textarea yourself (rows,
+* counters, auto-grow). `name` is restricted to the form's **string** fields.
+*
+* @example
+* <FormTextareaField form={form} name="bio" label="Bio" validators={{ onChange }}>
+*   {(field, { textareaProps }) => <Textarea {...textareaProps} rows={4} />}
+* </FormTextareaField>
+*/
+function FormTextareaField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: textareaControl
+	});
+}
+
+//#endregion
+//#region src/components/form-radio-group-field.tsx
+function radioGroupControl(field) {
+	return { radioGroupProps: {
+		value: field.state.value || null,
+		onValueChange: (value) => field.handleChange(value ?? ""),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* Radio-group field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `radioGroupProps` bundle. Compose the items yourself. `name` is restricted to the
+* form's **string** fields.
+*
+* @example
+* <FormRadioGroupField form={form} name="plan" label="Plan" validators={{ onChange }}>
+*   {(field, { radioGroupProps }) => (
+*     <RadioGroup {...radioGroupProps}>
+*       <RadioGroupItem value="a" />
+*     </RadioGroup>
+*   )}
+* </FormRadioGroupField>
+*/
+function FormRadioGroupField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: radioGroupControl
+	});
+}
+
+//#endregion
+//#region src/components/form-otp-field.tsx
+function otpControl(field) {
+	return { otpProps: {
+		value: field.state.value ?? "",
+		onChange: (value) => field.handleChange(value),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* One-time-code field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with an `otpProps` bundle. Compose the slots yourself. `name` is restricted to the form's
+* **string** fields.
+*
+* @example
+* <FormOTPField form={form} name="code" label="Code" validators={{ onChange }}>
+*   {(field, { otpProps }) => <InputOTP maxLength={6} {...otpProps}>{slots}</InputOTP>}
+* </FormOTPField>
+*/
+function FormOTPField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: otpControl
+	});
+}
+
+//#endregion
+//#region src/components/form-switch-field.tsx
+function switchControl(field) {
+	return { switchProps: {
+		checked: field.state.value,
+		onCheckedChange: (checked) => field.handleChange(checked),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* Toggle field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `switchProps` bundle. `name` is restricted to the form's **boolean** fields — a
+* string/number `name` is a type error.
+*
+* @example
+* <FormSwitchField form={form} name="enabled" label="Enabled" validators={{ onChange }}>
+*   {(field, { switchProps }) => <Switch {...switchProps} />}
+* </FormSwitchField>
+*/
+function FormSwitchField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: switchControl
+	});
+}
+
+//#endregion
+//#region src/components/form-number-field.tsx
+function numberControl(field) {
+	return { numberProps: {
+		value: field.state.value,
+		onChange: (event) => field.handleChange(event.target.value === "" ? 0 : event.target.valueAsNumber),
+		onBlur: field.handleBlur,
+		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
+	} };
+}
+/**
+* Numeric-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `numberProps` bundle. `name` is restricted to the form's **number** fields — a
+* string/boolean `name` is a type error.
+*
+* @example
+* <FormNumberField form={form} name="age" label="Age" validators={{ onChange }}>
+*   {(field, { numberProps }) => <Input type="number" {...numberProps} />}
+* </FormNumberField>
+*/
+function FormNumberField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: numberControl
+	});
+}
+
+//#endregion
+//#region src/components/form-slider-field.tsx
+function sliderControl(field) {
+	return { sliderProps: {
+		value: [field.state.value],
+		onValueChange: (values) => field.handleChange(values[0] ?? 0),
+		onBlur: field.handleBlur
+	} };
+}
+/**
+* Slider field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `sliderProps` bundle. `name` is restricted to the form's **number** fields; the bundle
+* converts to/from the `number[]` the range primitive uses internally.
+*
+* @example
+* <FormSliderField form={form} name="volume" label="Volume" validators={{ onChange }}>
+*   {(field, { sliderProps }) => <Slider min={0} max={100} step={1} {...sliderProps} />}
+* </FormSliderField>
+*/
+function FormSliderField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: sliderControl
+	});
+}
+
+//#endregion
+//#region src/components/form-toggle-group-field.tsx
+function toggleGroupControl(field) {
+	return { toggleGroupProps: {
+		value: field.state.value ? [field.state.value] : [],
+		onValueChange: (values) => field.handleChange(values[values.length - 1] ?? null),
+		onBlur: field.handleBlur
+	} };
+}
+/**
+* Single-select toggle-group field wrapper — same threaded-`form` typing and shared shell as
+* `FormSelectField`, with a `toggleGroupProps` bundle. `name` is restricted to the form's
+* **string | null** fields; the bundle converts to/from the `string[]` the multi-select
+* primitive uses internally.
+*
+* @example
+* <FormToggleGroupField form={form} name="align" label="Align" validators={{ onChange }}>
+*   {(field, { toggleGroupProps }) => (
+*     <ToggleGroup {...toggleGroupProps}>
+*       <ToggleGroupItem value="a">A</ToggleGroupItem>
+*     </ToggleGroup>
+*   )}
+* </FormToggleGroupField>
+*/
+function FormToggleGroupField(props) {
+	return /* @__PURE__ */ jsx(FormFieldBase, {
+		...props,
+		buildControl: toggleGroupControl
+	});
+}
+
+//#endregion
+//#region src/components/save-bar.tsx
+function SaveBar({ isDirty, isSubmitting, canSubmit, onReset, submitLabel = "Save changes", savingLabel = "Saving…", resetLabel = "Discard", className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid transition-[grid-template-rows] duration-300 ease-in-out", isDirty ? "grid-rows-[1fr]" : "grid-rows-[0fr]", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2 border-t px-4 py-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					onClick: onReset,
+					disabled: !isDirty || isSubmitting,
+					children: resetLabel
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					disabled: !isDirty || !canSubmit || isSubmitting,
+					children: isSubmitting ? savingLabel : submitLabel
+				})]
+			})
+		})
+	});
 }
 
 //#endregion
 //#region src/components/dashboard-sidebar.tsx
-function DashboardSidebarProvider({ className, style, ...props }) {
+const DashboardSidebarProvider = React.forwardRef((componentProps, forwardRef) => {
+	const { className, style, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(SidebarProvider, {
+		ref: forwardRef,
 		className: cn("!min-h-0 !w-auto flex flex-1 min-h-0 gap-2", "[&>[data-slot=tabs]]:flex-1 [&>[data-slot=tabs]]:min-w-0 [&>[data-slot=tabs]]:min-h-0 [&>[data-slot=tabs]]:flex [&>[data-slot=tabs]]:flex-col", className),
 		style: {
 			"--sidebar-width": "14rem",
@@ -345,10 +1358,13 @@ function DashboardSidebarProvider({ className, style, ...props }) {
 		},
 		...props
 	});
-}
-function DashboardSidebar({ className, children, ...props }) {
+});
+DashboardSidebarProvider.displayName = "DashboardSidebarProvider";
+const DashboardSidebar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	const { state } = useSidebar();
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar",
 		"data-state": state,
 		"data-collapsible": state === "collapsed" ? "icon" : "",
@@ -356,18 +1372,24 @@ function DashboardSidebar({ className, children, ...props }) {
 		...props,
 		children
 	});
-}
-function DashboardSidebarHeader({ className, children, ...props }) {
+});
+DashboardSidebar.displayName = "DashboardSidebar";
+const DashboardSidebarHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-header",
 		className: cn("flex items-start gap-0 p-1 rounded-md shrink-0 justify-end w-full", "group-data-[collapsible=icon]/dbs:justify-center", className),
 		...props,
 		children
 	});
-}
-function DashboardSidebarTrigger({ className, onClick, ...props }) {
+});
+DashboardSidebarHeader.displayName = "DashboardSidebarHeader";
+const DashboardSidebarTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, onClick, ...props } = componentProps;
 	const { toggleSidebar, state } = useSidebar();
 	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-trigger",
 		variant: "ghost",
 		size: "icon",
@@ -380,51 +1402,73 @@ function DashboardSidebarTrigger({ className, onClick, ...props }) {
 		...props,
 		children: state === "expanded" ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" })
 	});
-}
-function DashboardSidebarContent({ className, ...props }) {
+});
+DashboardSidebarTrigger.displayName = "DashboardSidebarTrigger";
+const DashboardSidebarContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-content",
 		className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden min-h-0", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className),
 		...props
 	});
-}
-function DashboardSidebarFooter({ className, ...props }) {
+});
+DashboardSidebarContent.displayName = "DashboardSidebarContent";
+const DashboardSidebarFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-footer",
 		className: cn("bg-background/80 dark:bg-accent/50 rounded-xl p-1 flex flex-col shrink-0", "items-start w-full", "group-data-[collapsible=icon]/dbs:items-center group-data-[collapsible=icon]/dbs:w-auto", className),
 		...props
 	});
-}
-function DashboardSidebarGroup({ className, ...props }) {
+});
+DashboardSidebarFooter.displayName = "DashboardSidebarFooter";
+const DashboardSidebarGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-group",
 		className: cn("flex flex-col gap-1 items-start p-1 w-full", className),
 		...props
 	});
-}
-function DashboardSidebarGroupLabel({ className, render, ...props }) {
+});
+DashboardSidebarGroup.displayName = "DashboardSidebarGroup";
+const DashboardSidebarGroupLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("truncate text-sm font-medium text-navbar-foreground opacity-90 px-2 py-1.5 rounded-md w-full", "group-data-[collapsible=icon]/dbs:hidden", className) }, props),
+		props: mergeProps({
+			ref: forwardRef,
+			className: cn("truncate text-sm font-medium text-navbar-foreground opacity-90 px-2 py-1.5 rounded-md w-full", "group-data-[collapsible=icon]/dbs:hidden", className)
+		}, props),
 		render,
 		state: { slot: "dashboard-sidebar-group-label" }
 	});
-}
-function DashboardSidebarMenu({ className, ...props }) {
+});
+DashboardSidebarGroupLabel.displayName = "DashboardSidebarGroupLabel";
+const DashboardSidebarMenu = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("ul", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-menu",
 		className: cn("flex w-full min-w-0 flex-col gap-1", className),
 		...props
 	});
-}
-function DashboardSidebarMenuItem({ className, ...props }) {
+});
+DashboardSidebarMenu.displayName = "DashboardSidebarMenu";
+const DashboardSidebarMenuItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("li", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-menu-item",
 		className: cn("relative list-none", className),
 		...props
 	});
-}
-const DashboardSidebarMenuButton = React.forwardRef(function DashboardSidebarMenuButton({ className, render, isActive = false, disabled = false, icon, action, children, ...props }, ref) {
+});
+DashboardSidebarMenuItem.displayName = "DashboardSidebarMenuItem";
+const DashboardSidebarMenuButton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, isActive = false, disabled = false, icon, action, children, ...props } = componentProps;
 	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
 			className: cn("size-6 rounded-full bg-background text-foreground flex items-center justify-center shrink-0 overflow-hidden", "[&>svg]:size-4 [&>svg]:shrink-0"),
@@ -442,7 +1486,7 @@ const DashboardSidebarMenuButton = React.forwardRef(function DashboardSidebarMen
 	return useRender({
 		defaultTagName: "button",
 		props: mergeProps({
-			ref,
+			ref: forwardRef,
 			type: "button",
 			"data-active": isActive,
 			className: cn("peer/dbs-button relative flex w-full items-center gap-2 h-10 p-2 rounded-full overflow-hidden", "text-sm font-medium transition-[width,padding,color,background-color] duration-200 ease-linear", disabled ? "cursor-default" : "cursor-pointer hover:bg-sidebar-accent", "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50", disabled ? "text-muted-foreground" : "text-navbar-foreground", disabled && "opacity-60", isActive && "bg-navbar-accent text-navbar-accent-foreground hover:bg-navbar-accent", "aria-expanded:bg-navbar-accent aria-expanded:text-navbar-accent-foreground aria-expanded:hover:bg-navbar-accent", className),
@@ -456,44 +1500,61 @@ const DashboardSidebarMenuButton = React.forwardRef(function DashboardSidebarMen
 	});
 });
 DashboardSidebarMenuButton.displayName = "DashboardSidebarMenuButton";
-function DashboardSidebarMenuAddon({ className, ...props }) {
+const DashboardSidebarMenuAddon = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-menu-addon",
 		className: cn("ml-auto shrink-0 inline-flex items-center", className),
 		...props
 	});
-}
-function DashboardSidebarMenuBadge({ className, ...props }) {
+});
+DashboardSidebarMenuAddon.displayName = "DashboardSidebarMenuAddon";
+const DashboardSidebarMenuBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(CounterBadge, {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-menu-badge",
 		className: cn("pointer-events-none absolute select-none", "right-2 top-1/2 -translate-y-1/2", "group-data-[collapsible=icon]/dbs:right-[-2px] group-data-[collapsible=icon]/dbs:top-[-3.5px] group-data-[collapsible=icon]/dbs:translate-y-0", "peer-data-[active=true]/dbs-button:bg-navbar-icon-bg peer-data-[active=true]/dbs-button:text-navbar-foreground", className),
 		...props
 	});
-}
-function DashboardSidebarSubmenu({ className, ...props }) {
+});
+DashboardSidebarMenuBadge.displayName = "DashboardSidebarMenuBadge";
+const DashboardSidebarSubmenu = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-submenu",
 		className: cn("bg-popover border border-border shadow-md rounded-md p-1", "flex flex-col w-[238px]", className),
 		...props
 	});
-}
-function DashboardSidebarSubmenuItem({ className, render, isActive = false, ...props }) {
+});
+DashboardSidebarSubmenu.displayName = "DashboardSidebarSubmenu";
+const DashboardSidebarSubmenuItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, isActive = false, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex items-center gap-2 p-2 rounded-md cursor-pointer", "text-sm text-foreground leading-snug", "hover:bg-accent transition-colors", isActive && "bg-accent font-medium", className) }, props),
+		props: mergeProps({
+			ref: forwardRef,
+			className: cn("flex items-center gap-2 p-2 rounded-md cursor-pointer", "text-sm text-foreground leading-snug", "hover:bg-accent transition-colors", isActive && "bg-accent font-medium", className)
+		}, props),
 		render,
 		state: {
 			slot: "dashboard-sidebar-submenu-item",
 			active: isActive
 		}
 	});
-}
-function DashboardSidebarSubmenuSeparator({ className }) {
+});
+DashboardSidebarSubmenuItem.displayName = "DashboardSidebarSubmenuItem";
+const DashboardSidebarSubmenuSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dashboard-sidebar-submenu-separator",
 		className: cn("h-px bg-border -mx-1 my-1", className)
 	});
-}
+});
+DashboardSidebarSubmenuSeparator.displayName = "DashboardSidebarSubmenuSeparator";
 
 //#endregion
 //#region src/components/dashboard-sidebar-nav.tsx
@@ -589,4 +1650,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, NewBadge, ProfessionalBadge, RoleBadge, TrialBadge, useCopyToClipboard, useSidebar as useDashboardSidebar };
+export { BetaBadge, CardSaveBar, ChatbotInput, ChatbotPage, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotSidebar, ChatbotUserMessage, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormComboboxField, FormFieldBase, FormInputField, FormMultiComboboxField, FormNumberField, FormOTPField, FormRadioGroupField, FormSelectField, FormSliderField, FormSwitchField, FormTextareaField, FormToggleGroupField, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, SubmitButton, TrialBadge, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withForm };