@aircall/blocks 0.12.0 → 0.14.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { Anchor, Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, FieldLabelAside, FieldLabelInfo, FieldLabelRow, HoverCard, HoverCardContent, HoverCardTrigger, InputGroup, InputGroupButton, InputGroupTextarea, Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle, Popover, PopoverContent, PopoverTrigger, Separator, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TabsList, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsTranslation, useSidebar } from "@aircall/ds";
+import { Anchor, Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldLabel, FieldLabelAside, FieldLabelInfo, FieldLabelRow, HoverCard, HoverCardContent, HoverCardTrigger, InputGroup, InputGroupButton, InputGroupTextarea, Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle, Popover, PopoverContent, PopoverTrigger, Separator, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TabsList, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsTranslation, useSidebar } from "@aircall/ds";
 import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AircallLoader, AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, LockKeyhole, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
+import { AircallLoader, AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, History, LockKeyhole, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCallbackRef, useControllableState, useIsMounted, useUnmount } from "@aircall/hooks";
@@ -29,6 +29,9 @@ const de = {
 	"chatbotInput.messageLabel": "Nachricht",
 	"chatbotInput.stopGenerating": "Generierung stoppen",
 	"chatbotInput.sendMessage": "Nachricht senden",
+	"chatbotInput.conversationHistory": "Gesprächsverlauf",
+	"chatbotInput.noConversations": "Keine vergangenen Gespräche",
+	"chatbotInput.recentChatHistory": "Letzter Chatverlauf",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Neu",
 	"productBadge.deprecated": "Veraltet",
@@ -85,6 +88,9 @@ const en = {
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Stop generating",
 	"chatbotInput.sendMessage": "Send message",
+	"chatbotInput.conversationHistory": "Conversation history",
+	"chatbotInput.noConversations": "No past conversations",
+	"chatbotInput.recentChatHistory": "Recent chat history",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "New",
 	"productBadge.deprecated": "Deprecated",
@@ -141,6 +147,9 @@ const es = {
 	"chatbotInput.messageLabel": "Mensaje",
 	"chatbotInput.stopGenerating": "Detener la generación",
 	"chatbotInput.sendMessage": "Enviar mensaje",
+	"chatbotInput.conversationHistory": "Historial de conversaciones",
+	"chatbotInput.noConversations": "No hay conversaciones pasadas",
+	"chatbotInput.recentChatHistory": "Historial de chats recientes",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Nuevo",
 	"productBadge.deprecated": "Obsoleto",
@@ -197,6 +206,9 @@ const fr = {
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Arrêter la génération",
 	"chatbotInput.sendMessage": "Envoyer un message",
+	"chatbotInput.conversationHistory": "Historique des conversations",
+	"chatbotInput.noConversations": "Aucune conversation passée",
+	"chatbotInput.recentChatHistory": "Historique récent des chats",
 	"productBadge.beta": "Bêta",
 	"productBadge.new": "Nouveau",
 	"productBadge.deprecated": "Obsolète",
@@ -253,6 +265,9 @@ const it = {
 	"chatbotInput.messageLabel": "Messaggio",
 	"chatbotInput.stopGenerating": "Interrompi la generazione",
 	"chatbotInput.sendMessage": "Invia messaggio",
+	"chatbotInput.conversationHistory": "Cronologia conversazioni",
+	"chatbotInput.noConversations": "Nessuna conversazione passata",
+	"chatbotInput.recentChatHistory": "Cronologia recente delle chat",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Nuovo",
 	"productBadge.deprecated": "Obsoleto",
@@ -1445,7 +1460,7 @@ function ChatbotPanelHeader({ title = "Ask Aircall", onMenu, menuContent, menuOp
 const SIDEBAR_MIN_WIDTH = 140;
 const SIDEBAR_MAX_WIDTH = 480;
 const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
-	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", popup = false, className } = componentProps;
+	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", showNewChat = true, popup = false, className } = componentProps;
 	const t = useDsTranslation("blocks");
 	const isNewChatActive = !activeConversationId || !conversations.some((c) => c.id === activeConversationId);
 	const sidebarInternalRef = React.useRef(null);
@@ -1478,7 +1493,7 @@ const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
 	const scrollableContent = /* @__PURE__ */ jsxs("div", {
 		"data-slot": "sidebar-content",
 		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", "[scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:bg-transparent [&:hover::-webkit-scrollbar-thumb]:bg-black/20"),
-		children: [/* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		children: [showNewChat && /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 			isActive: isNewChatActive,
 			onClick: onNewChat,
 			children: [/* @__PURE__ */ jsx(Plus, {}), /* @__PURE__ */ jsx("span", { children: t("chatbotSidebar.newChat") })]
@@ -1533,6 +1548,17 @@ const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
 });
 ChatbotSidebar.displayName = "ChatbotSidebar";
 
+//#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-input.tsx
 const textareaVariants = cva([
@@ -1556,13 +1582,14 @@ const textareaVariants = cva([
 		expanded: false
 	}
 });
-function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", expanded = false, disabled, ...textareaProps }) {
+function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", expanded = false, disabled, suggestions, onSuggestionClick, conversations, activeConversationId, onSelectConversation, ...textareaProps }) {
 	const t = useDsTranslation("blocks");
 	const [currentValue = "", setCurrentValue] = useControllableState({
 		prop: value,
 		defaultProp: "",
 		onChange: onValueChange
 	});
+	const [historyOpen, setHistoryOpen] = React.useState(false);
 	const hasValue = currentValue.trim().length > 0;
 	const handleChange = (event) => {
 		setCurrentValue(event.target.value);
@@ -1579,10 +1606,63 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 		}
 		textareaProps.onKeyDown?.(event);
 	};
+	const hasSuggestions = suggestions && suggestions.length > 0;
+	const hasBottomRow = hasSuggestions || conversations !== void 0;
+	const sendStopButton = loading ? /* @__PURE__ */ jsx(InputGroupButton, {
+		variant: "secondary",
+		size: "icon",
+		className: "rounded-full",
+		"aria-label": t("chatbotInput.stopGenerating"),
+		disabled,
+		onClick: onStop,
+		children: /* @__PURE__ */ jsx(Square, {})
+	}) : /* @__PURE__ */ jsx(InputGroupButton, {
+		variant: hasValue ? "default" : "ghost",
+		size: "icon",
+		className: "rounded-full",
+		"aria-label": t("chatbotInput.sendMessage"),
+		disabled: disabled || !hasValue,
+		onClick: submit,
+		children: /* @__PURE__ */ jsx(ArrowUp, {})
+	});
+	const historyButton = conversations !== void 0 ? /* @__PURE__ */ jsxs(Popover, {
+		open: historyOpen,
+		onOpenChange: setHistoryOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			disabled,
+			"aria-label": t("chatbotInput.conversationHistory"),
+			children: /* @__PURE__ */ jsx(History, {})
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			sideOffset: 4,
+			className: "w-80 gap-0 p-0",
+			children: conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-6 text-center text-sm text-muted-foreground",
+				children: t("chatbotInput.noConversations")
+			}) : /* @__PURE__ */ jsx(SidebarProvider, {
+				className: "!min-h-0",
+				style: { "--sidebar-width": "20rem" },
+				children: /* @__PURE__ */ jsx(ChatbotSidebar, {
+					popup: true,
+					showNewChat: false,
+					recentLabel: t("chatbotInput.recentChatHistory"),
+					className: "bg-sidebar [&_[data-slot=sidebar-content]]:gap-0 [&_[data-slot=sidebar-content]]:max-h-[280px]",
+					conversations,
+					activeConversationId,
+					onSelectConversation: (id) => {
+						onSelectConversation?.(id);
+						setHistoryOpen(false);
+					}
+				})
+			})
+		})]
+	}) : null;
 	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),
+		className: cn("h-auto gap-2 overflow-clip rounded-3xl bg-background py-2 pr-2 pl-6", hasBottomRow ? "w-fit flex-col items-stretch" : "items-end", "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,
@@ -1597,40 +1677,27 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 				size,
 				expanded
 			}))
-		}), /* @__PURE__ */ jsx("div", {
+		}), hasBottomRow ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex gap-2",
+				children: hasSuggestions && suggestions.map((s) => /* @__PURE__ */ jsx(ChatbotPanelSuggestion, {
+					className: "max-w-none shrink-0 whitespace-nowrap",
+					disabled,
+					onClick: () => onSuggestionClick?.(s),
+					children: s.label
+				}, s.id))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [historyButton, sendStopButton]
+			})]
+		}) : /* @__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": t("chatbotInput.stopGenerating"),
-				disabled,
-				onClick: onStop,
-				children: /* @__PURE__ */ jsx(Square, {})
-			}) : /* @__PURE__ */ jsx(InputGroupButton, {
-				variant: hasValue ? "default" : "ghost",
-				size: "icon",
-				className: "rounded-full",
-				"aria-label": t("chatbotInput.sendMessage"),
-				disabled: disabled || !hasValue,
-				onClick: submit,
-				children: /* @__PURE__ */ jsx(ArrowUp, {})
-			})
+			children: sendStopButton
 		})]
 	});
 }
 
-//#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 }) {
@@ -1667,17 +1734,27 @@ const DashboardStandalonePage = React.forwardRef((componentProps, forwardRef) =>
 	return /* @__PURE__ */ jsx("div", {
 		ref: forwardRef,
 		"data-slot": "dashboard-standalone-page",
-		className: cn("flex h-screen flex-col bg-neutral-200 dark:bg-neutral-950", className),
+		className: cn("flex h-screen gap-2 overflow-hidden bg-page-background p-2", className),
 		...props
 	});
 });
 DashboardStandalonePage.displayName = "DashboardStandalonePage";
+const DashboardStandalonePageContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "dashboard-standalone-page-content",
+		className: cn("flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl bg-page-surface border border-border", className),
+		...props
+	});
+});
+DashboardStandalonePageContent.displayName = "DashboardStandalonePageContent";
 const DashboardStandalonePageHeader = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("header", {
 		ref: forwardRef,
 		"data-slot": "dashboard-standalone-page-header",
-		className: cn("grid h-16 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-4 border-b border-border bg-background px-4 md:px-6", className),
+		className: cn("relative flex h-16 shrink-0 flex-col items-center justify-center gap-0.5 border-b border-border bg-background px-16 text-center", className),
 		...props
 	});
 });
@@ -1687,18 +1764,28 @@ const DashboardStandalonePageTitle = React.forwardRef((componentProps, forwardRe
 	return /* @__PURE__ */ jsx("h1", {
 		ref: forwardRef,
 		"data-slot": "dashboard-standalone-page-title",
-		className: cn("col-start-2 row-start-1 truncate text-center text-base font-bold text-foreground", className),
+		className: cn("max-w-xl truncate text-center text-xl leading-tight font-bold text-foreground", className),
 		...props
 	});
 });
 DashboardStandalonePageTitle.displayName = "DashboardStandalonePageTitle";
+const DashboardStandalonePageDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("p", {
+		ref: forwardRef,
+		"data-slot": "dashboard-standalone-page-description",
+		className: cn("max-w-xl truncate text-center text-sm leading-tight font-medium text-muted-foreground", className),
+		...props
+	});
+});
+DashboardStandalonePageDescription.displayName = "DashboardStandalonePageDescription";
 const DashboardStandalonePageActions = React.forwardRef((componentProps, forwardRef) => {
 	const { side = "end", className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
 		ref: forwardRef,
 		"data-slot": "dashboard-standalone-page-actions",
 		"data-side": side,
-		className: cn("row-start-1 flex min-w-0 items-center gap-2", side === "start" ? "col-start-1 justify-start" : "col-start-3 justify-end", className),
+		className: cn("absolute inset-y-0 flex items-center gap-2", side === "start" ? "left-4" : "right-4", className),
 		...props
 	});
 });
@@ -1713,16 +1800,16 @@ const DashboardStandalonePageAction = React.forwardRef((componentProps, forwardR
 	});
 });
 DashboardStandalonePageAction.displayName = "DashboardStandalonePageAction";
-const DashboardStandalonePageContent = React.forwardRef((componentProps, forwardRef) => {
+const DashboardStandalonePageMain = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("main", {
 		ref: forwardRef,
-		"data-slot": "dashboard-standalone-page-content",
+		"data-slot": "dashboard-standalone-page-main",
 		className: cn("min-h-0 flex-1 overflow-auto p-4 md:p-6", className),
 		...props
 	});
 });
-DashboardStandalonePageContent.displayName = "DashboardStandalonePageContent";
+DashboardStandalonePageMain.displayName = "DashboardStandalonePageMain";
 
 //#endregion
 //#region src/components/dashboard-page.tsx
@@ -2366,7 +2453,7 @@ function toFieldErrors(errors) {
 
 //#endregion
 //#region src/components/form-field.tsx
-function FormFieldShell({ label, description, necessityIndicator, children }) {
+function FormFieldShell({ label, description, necessityIndicator, id, children, orientation = "vertical", controlPosition = "end", controlVariant = "fill" }) {
 	const errors = useFieldContext().state.meta.errors;
 	const labelContent = typeof label === "string" ? label : label?.content;
 	const labelInfo = typeof label === "object" ? label.info : void 0;
@@ -2376,6 +2463,7 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 	const descriptionVariant = (typeof description === "object" ? description.variant : void 0) ?? "instructional";
 	const labelNode = labelContent !== void 0 && /* @__PURE__ */ jsx(FieldLabel, {
 		necessityIndicator,
+		htmlFor: id,
 		children: labelContent
 	});
 	const labelRow = labelContent !== void 0 && (hasAddons ? /* @__PURE__ */ jsxs(FieldLabelRow, { children: [
@@ -2387,16 +2475,44 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 		variant: descriptionVariant,
 		children: descriptionContent
 	});
-	return /* @__PURE__ */ jsxs(Field, {
-		"data-invalid": errors.length > 0 ? true : void 0,
+	const invalid = errors.length > 0 ? true : void 0;
+	const instructionalDesc = descriptionVariant === "instructional" ? descriptionNode : null;
+	const contextualDesc = descriptionVariant === "contextual" ? descriptionNode : null;
+	const errorNode = /* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) });
+	if (orientation === "vertical") return /* @__PURE__ */ jsxs(Field, {
+		"data-invalid": invalid,
 		children: [
 			labelRow,
-			descriptionVariant === "instructional" && descriptionNode,
+			instructionalDesc,
 			children,
-			descriptionVariant === "contextual" && descriptionNode,
-			/* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) })
+			contextualDesc,
+			errorNode
 		]
 	});
+	if (controlVariant === "inline") {
+		const textSide = descriptionContent !== void 0 || errors.length > 0 ? /* @__PURE__ */ jsxs(FieldContent, { children: [
+			labelRow,
+			instructionalDesc,
+			contextualDesc,
+			errorNode
+		] }) : labelRow;
+		return /* @__PURE__ */ jsxs(Field, {
+			orientation,
+			"data-invalid": invalid,
+			children: [controlPosition === "start" ? children : textSide, controlPosition === "start" ? textSide : children]
+		});
+	}
+	const labelCol = /* @__PURE__ */ jsxs(FieldContent, { children: [labelRow, instructionalDesc] });
+	const controlCol = /* @__PURE__ */ jsxs(FieldContent, { children: [
+		children,
+		contextualDesc,
+		errorNode
+	] });
+	return /* @__PURE__ */ jsxs(Field, {
+		orientation,
+		"data-invalid": invalid,
+		children: [controlPosition === "start" ? controlCol : labelCol, controlPosition === "start" ? labelCol : controlCol]
+	});
 }
 /**
 * Shared runtime binder for the per-primitive wrappers (FormSelectField, FormInputField, …).
@@ -2404,7 +2520,8 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 * the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
 */
 function FormFieldBase(props) {
-	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, buildControl, children } = props;
+	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, orientation, controlPosition, controlVariant, buildControl, children } = props;
+	const id = `${React.useId()}-${name}`;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
@@ -2417,20 +2534,25 @@ function FormFieldBase(props) {
 			label,
 			description,
 			necessityIndicator,
-			children: children(field, buildControl(field))
+			orientation,
+			controlPosition,
+			controlVariant,
+			id,
+			children: children(field, buildControl(field, id))
 		})
 	});
 }
 
 //#endregion
 //#region src/components/form-select-field.tsx
-function selectControl(field) {
+function selectControl(field, id) {
 	return {
 		selectProps: {
 			value: field.state.value || null,
 			onValueChange: (value) => field.handleChange(value ?? "")
 		},
 		selectTriggerProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2463,8 +2585,9 @@ function FormSelectField(props) {
 
 //#endregion
 //#region src/components/form-input-field.tsx
-function inputControl(field) {
+function inputControl(field, id) {
 	return { inputProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (event) => field.handleChange(event.target.value),
 		onBlur: field.handleBlur,
@@ -2490,13 +2613,14 @@ function FormInputField(props) {
 
 //#endregion
 //#region src/components/form-combobox-field.tsx
-function comboboxControl(field) {
+function comboboxControl(field, id) {
 	return {
 		comboboxProps: {
 			value: field.state.value || null,
 			onValueChange: (value) => field.handleChange(value ?? "")
 		},
 		comboboxInputProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2530,13 +2654,14 @@ function FormComboboxField(props) {
 
 //#endregion
 //#region src/components/form-multi-combobox-field.tsx
-function multiComboboxControl(field) {
+function multiComboboxControl(field, id) {
 	return {
 		comboboxProps: {
 			value: field.state.value ?? [],
 			onValueChange: (values) => field.handleChange(values)
 		},
 		comboboxInputProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2594,6 +2719,7 @@ function FormMultiComboboxField(props) {
 */
 function FormArrayField(props) {
 	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, children } = props;
+	const id = `${React.useId()}-${name}`;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
@@ -2607,6 +2733,7 @@ function FormArrayField(props) {
 			label,
 			description,
 			necessityIndicator,
+			id,
 			children: children(field)
 		})
 	});
@@ -2614,8 +2741,9 @@ function FormArrayField(props) {
 
 //#endregion
 //#region src/components/form-textarea-field.tsx
-function textareaControl(field) {
+function textareaControl(field, id) {
 	return { textareaProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (event) => field.handleChange(event.target.value),
 		onBlur: field.handleBlur,
@@ -2641,7 +2769,7 @@ function FormTextareaField(props) {
 
 //#endregion
 //#region src/components/form-radio-group-field.tsx
-function radioGroupControl(field) {
+function radioGroupControl(field, _id) {
 	return { radioGroupProps: {
 		value: field.state.value || null,
 		onValueChange: (value) => field.handleChange(value ?? ""),
@@ -2672,8 +2800,9 @@ function FormRadioGroupField(props) {
 
 //#endregion
 //#region src/components/form-otp-field.tsx
-function otpControl(field) {
+function otpControl(field, id) {
 	return { otpProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (value) => field.handleChange(value),
 		onBlur: field.handleBlur,
@@ -2699,8 +2828,9 @@ function FormOTPField(props) {
 
 //#endregion
 //#region src/components/form-switch-field.tsx
-function switchControl(field) {
+function switchControl(field, id) {
 	return { switchProps: {
+		id,
 		checked: field.state.value,
 		onCheckedChange: (checked) => field.handleChange(checked),
 		onBlur: field.handleBlur,
@@ -2712,22 +2842,30 @@ function switchControl(field) {
 * with a `switchProps` bundle. `name` is restricted to the form's **boolean** fields — a
 * string/number `name` is a type error.
 *
+* In a horizontal/responsive layout the switch is a bare, natural-width control beside its label
+* (`controlPosition` picks the side — defaults to `'start'`, i.e. switch on the left).
+*
 * @example
 * <FormSwitchField form={form} name="enabled" label="Enabled" validators={{ onChange }}>
 *   {(field, { switchProps }) => <Switch {...switchProps} />}
 * </FormSwitchField>
 */
 function FormSwitchField(props) {
+	const { orientation = "horizontal", controlPosition = "start", ...rest } = props;
 	return /* @__PURE__ */ jsx(FormFieldBase, {
-		...props,
+		...rest,
+		orientation,
+		controlPosition,
+		controlVariant: "inline",
 		buildControl: switchControl
 	});
 }
 
 //#endregion
 //#region src/components/form-numeric-field.tsx
-function numericControl(field) {
+function numericControl(field, id) {
 	return { numericProps: {
+		id,
 		value: field.state.value,
 		onValueChange: (value) => field.handleChange(value ?? 0),
 		onBlur: field.handleBlur,
@@ -2753,10 +2891,11 @@ function FormNumericField(props) {
 
 //#endregion
 //#region src/components/form-slider-field.tsx
-function sliderControl(field) {
+function sliderControl(field, id) {
 	return { sliderProps: {
+		id,
 		value: [field.state.value],
-		onValueChange: (values) => field.handleChange(values[0] ?? 0),
+		onValueChange: (value) => field.handleChange(Array.isArray(value) ? value[0] ?? 0 : value),
 		onBlur: field.handleBlur
 	} };
 }
@@ -2779,7 +2918,7 @@ function FormSliderField(props) {
 
 //#endregion
 //#region src/components/form-toggle-group-field.tsx
-function toggleGroupControl(field) {
+function toggleGroupControl(field, _id) {
 	return { toggleGroupProps: {
 		value: field.state.value ? [field.state.value] : [],
 		onValueChange: (values) => field.handleChange(values[values.length - 1] ?? null),
@@ -3141,4 +3280,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotResponseLoading, 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, FormArrayField, FormComboboxField, FormFieldBase, FormFieldShell, FormInputField, FormMultiComboboxField, FormNumericField, 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, withFieldGroup, withForm };
+export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotResponseLoading, 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, DashboardStandalonePageDescription, DashboardStandalonePageHeader, DashboardStandalonePageMain, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormArrayField, FormComboboxField, FormFieldBase, FormFieldShell, FormInputField, FormMultiComboboxField, FormNumericField, 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, withFieldGroup, withForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -81,7 +81,7 @@
     "vite": "7.3.1",
     "vitest": "4.0.17",
     "zod": "4.4.3",
-    "@aircall/ds": "0.18.0",
+    "@aircall/ds": "0.20.0",
     "@aircall/hooks": "0.5.1"
   },
   "keywords": [
@@ -97,7 +97,7 @@
     "build:js": "tsdown --config ./tsdown.config.ts",
     "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/globals.css --minify",
     "build:package": "pnpm run build:js && pnpm run build:css",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.strict.json",
     "lint": "eslint . --max-warnings 0",
     "sb:dev": "storybook dev -p 6009",
     "sb:build": "storybook build",

package/skills/aircall-blocks/migrate-dashboard/SKILL.md

@@ -80,7 +80,7 @@ utils/data home or must stay in the consuming app.
 
 **UI with no blocks/ds equivalent yet**: some `@dashboard/library` UI components have
 no target in `@aircall/blocks` or `@aircall/ds` yet (e.g. `PieChart` and other charts,
-`AudioPlayer`, `TileLegend`). If a UI component is not in the routing table below and
+`TileLegend`). If a UI component is not in the routing table below and
 not listed above, leave it imported from `@dashboard/library` for now — do not force a
 migration or invent a target.
 
@@ -100,6 +100,7 @@ migration or invent a target.
 | `List` + `ListItem` | `ItemGroup`, `Item`, `ItemMedia`, `ItemContent`, `ItemActions` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/list | available |
 | `Tile` + `TileHeader` + `TileValue` | `Card` (+ parts) as the tile container (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/tile | available |
 | `GridLayout` + `GridItem` + `Gap` | native `<div>` + Tailwind grid/flex/gap utilities (NO component import needed — these are layout primitives) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/layout | available |
+| `AudioPlayer` | `Audio`, `AudioPlayerRow`, `AudioPlayerButton`, `AudioPlayerBar`, `AudioPlayerTime`, `AudioPlayerSpeed`, `AudioPlayerSkip`, `AudioPlayerManager`, `useAudioPlayer` (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-audio-player | available |
 | `InfoPopup` + `InfoPopupTrigger` + `InfoPopupContent` | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/info-popup | available |
 | `CopyToClipboardButton` + `CopyToClipboardText` | `CopyButton`, `CopyButtonIcon`, `CopyButtonLabel` (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/copy-button | available |
 | `ToggleRow` | `Field` (orientation="horizontal") + `Switch` + `FieldLabel` + optional `FieldDescription` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/toggle-row | available |