@aircall/blocks 0.11.0 → 0.13.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, 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, 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 }) {
@@ -2366,17 +2433,35 @@ function toFieldErrors(errors) {
 
 //#endregion
 //#region src/components/form-field.tsx
-function FormFieldShell({ label, description, necessityIndicator, children }) {
+function FormFieldShell({ label, description, necessityIndicator, id, children }) {
 	const errors = useFieldContext().state.meta.errors;
+	const labelContent = typeof label === "string" ? label : label?.content;
+	const labelInfo = typeof label === "object" ? label.info : void 0;
+	const labelAside = typeof label === "object" ? label.aside : void 0;
+	const hasAddons = labelInfo !== void 0 || labelAside !== void 0;
+	const descriptionContent = typeof description === "string" ? description : description?.content;
+	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: [
+		labelNode,
+		labelInfo !== void 0 && /* @__PURE__ */ jsx(FieldLabelInfo, { children: labelInfo }),
+		labelAside !== void 0 && /* @__PURE__ */ jsx(FieldLabelAside, { children: labelAside })
+	] }) : labelNode);
+	const descriptionNode = descriptionContent !== void 0 && /* @__PURE__ */ jsx(FieldDescription, {
+		variant: descriptionVariant,
+		children: descriptionContent
+	});
 	return /* @__PURE__ */ jsxs(Field, {
 		"data-invalid": errors.length > 0 ? true : void 0,
 		children: [
-			label && /* @__PURE__ */ jsx(FieldLabel, {
-				necessityIndicator,
-				children: label
-			}),
-			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			labelRow,
+			descriptionVariant === "instructional" && descriptionNode,
 			children,
+			descriptionVariant === "contextual" && descriptionNode,
 			/* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) })
 		]
 	});
@@ -2388,6 +2473,7 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 */
 function FormFieldBase(props) {
 	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, buildControl, children } = props;
+	const id = `${React.useId()}-${name}`;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
@@ -2400,20 +2486,22 @@ function FormFieldBase(props) {
 			label,
 			description,
 			necessityIndicator,
-			children: children(field, buildControl(field))
+			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
 		}
@@ -2446,8 +2534,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,
@@ -2473,13 +2562,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
 		}
@@ -2513,13 +2603,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
 		}
@@ -2559,7 +2650,7 @@ function FormMultiComboboxField(props) {
 * Each row is composed from the existing single-control wrappers with an indexed `name`.
 *
 * @example
-* <FormArrayField form={form} name="webhooks" label="Webhooks" description="Endpoints to notify">
+* <FormArrayField form={form} name="webhooks" label="Webhooks" description={{ content: 'Endpoints to notify', variant: 'contextual' }}>
 *   {field => (
 *     <>
 *       {field.state.value.map((_row, i) => (
@@ -2577,6 +2668,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,
@@ -2590,6 +2682,7 @@ function FormArrayField(props) {
 			label,
 			description,
 			necessityIndicator,
+			id,
 			children: children(field)
 		})
 	});
@@ -2597,8 +2690,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,
@@ -2624,7 +2718,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 ?? ""),
@@ -2655,8 +2749,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,
@@ -2682,8 +2777,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,
@@ -2709,8 +2805,9 @@ function FormSwitchField(props) {
 
 //#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,
@@ -2736,10 +2833,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
 	} };
 }
@@ -2762,7 +2860,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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.11.0",
+  "version": "0.13.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.17.1",
+    "@aircall/ds": "0.19.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/form-wizard/SKILL.md

@@ -169,15 +169,34 @@ cross-step validation.
 
 | `FormFieldProps` | After |
 |---|---|
-| `name` / `label` | `name` / `label` on the `Form*Field` |
+| `name` | `name` on the `Form*Field` |
+| `label` | `label` — a string, or `{ content, aside?, info? }` (see below) |
+| helper/description text | `description` — a string, or `{ content, variant? }` (see below) |
 | `validate` | `validators.onChange` / `onSubmit` on the `Form*Field` |
 | `defaultValue` | `defaultValues[name]` in `useForm` |
 | `getErrorMessage(e)` | return the translated string from the validator |
 
+**`label`** — a string is the label text. The object form adds label-row affordances:
+- `label={{ content, info }}` — `info` is an `(i)` icon opening a popover of purely additive context
+  (hide it when ~90% of users don't need it).
+- `label={{ content, aside }}` — `aside` is free-form content pinned to the **right** of the row (a
+  "Where do I find this?" link, a popover, plain text, …). You pass the node — an `Anchor`, a
+  `Popover`, whatever — and blocks wraps it in `FieldLabelAside` for alignment + typography, forcing
+  no styling of its own.
+
+**`description`** — a string renders as the **`instructional`** variant (under the label, always
+visible — the default). Pass `{ content, variant: 'contextual' }` to move it **below the control**,
+where it is **hidden when the field is invalid** (the error takes its slot). Never mix both kinds on
+one field.
+
+**`necessityIndicator="required" | "optional"`** — mark only the exceptions (the few optional fields
+in a mostly-required form, or vice versa); never mix both markers in one form.
+
 ## Fields reference
 
 `@aircall/blocks` ships typed wrappers for all common DS controls; each takes `form`,
-`name`, `label`, optional `validators`, and a render-prop `(field, control) => …` —
+`name`, `label`, optional `validators`, optional `description` / `necessityIndicator`
+(see Prop mapping above), and a render-prop `(field, control) => …` —
 spread the control bundle onto the matching DS primitive.
 
 | Input | Block | Input | Block |

package/skills/aircall-blocks/setup/SKILL.md

@@ -5,7 +5,8 @@ description: >
   Load when wiring blocks compositions (DashboardPage, DashboardPageHeader,
   DashboardSidebar, empty states, form fields) into a project: installing the
   package, importing its precompiled globals.css after the DS bundle, and the DS
-  providers it relies on.
+  providers it relies on. Covers both standalone apps and module-federation
+  consumers where the host already loads DS globals.
 type: core
 library: aircall-blocks
 library_version: "0.5.1"
@@ -29,8 +30,27 @@ Install blocks alongside DS:
 pnpm add @aircall/blocks @aircall/ds @aircall/react-icons
 ```
 
-Import the blocks bundle **after** the DS bundle from your JS/TS entry. It carries
-the page-layout grid and block-only tokens on top of DS:
+How you import the CSS depends on whether your app is standalone or a
+**module-federation consumer** whose host already loads DS globals.
+
+### Standalone app (owns its own Preflight)
+
+`@aircall/blocks/globals.css` is a **delta build** — it contains only blocks-specific tokens
+and utility classes; it does NOT bundle DS. Import DS globals first (Preflight + DS tokens +
+DS utilities), then blocks globals (blocks-specific delta). Always import in this order.
+
+```css
+/* style.css */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@import '@aircall/ds/globals.css';
+@import '@aircall/blocks/globals.css';
+
+@source './src/**/*.{ts,tsx}';
+```
+
+Or from a JS/TS entry (no custom Tailwind classes of your own):
 
 ```tsx
 // main.tsx
@@ -38,6 +58,28 @@ import '@aircall/ds/globals.css';
 import '@aircall/blocks/globals.css';
 ```
 
+### Module-federation consumer (host already owns the Preflight)
+
+When your app is a remote loaded inside a host that already imports DS globals
+(e.g. `dashboard-v4`), **do not re-import DS or blocks globals** in your own
+CSS. The host's single Preflight applies to the whole document — re-importing
+it duplicates the base reset and causes cascade conflicts (see Common Mistakes
+below).
+
+Import only the Tailwind layers you need for your own authored utility classes:
+
+```css
+/* style.css */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+@source './**/*.{ts,tsx}';
+```
+
+> **Note on the `.css` extension**: `@import "tailwindcss/theme"` (no `.css`)
+> silently fails in webpack/Rsbuild PostCSS pipelines — the extension is required.
+
 Blocks render under the same DS providers — there is no blocks-specific provider; mount the
 DS root providers from `aircall-ds/setup` as needed (`ThemeProvider` / `TooltipProvider` /
 `Toaster`). Two DS providers matter specifically once you use blocks:
@@ -78,26 +120,82 @@ function CampaignsHeader() {
 
 ## Common Mistakes
 
+### HIGH — Re-importing DS/blocks globals in a module-federation consumer
+
+Wrong — in a consumer whose host already loads DS globals:
+
+```css
+@import 'tailwindcss';
+@import '@aircall/ds/globals.css';
+@import '@aircall/blocks/globals.css';
+```
+
+Correct — consumer owns only its own utilities, no Preflight:
+
+```css
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@source './**/*.{ts,tsx}';
+```
+
+In a module-federation setup, CSS from each remote lands in the **same document**
+as the host. DS globals ships a Preflight (`@layer base { * { border-color: var(--color-border); } }`)
+that sets the token-based border color globally. If the consumer also imports DS globals
+(or the full `@import 'tailwindcss'`), it emits a second `@layer base` reset. Because
+webpack/Rsbuild emits deep dependencies first and the consumer's own CSS last, the
+consumer's Preflight (`border-color: currentColor`) ends up later in the output — and
+later wins. DS component borders (Card, etc.) lose their token color and become invisible.
+
 ### HIGH — Importing blocks globals before DS globals (or omitting DS globals)
 
-Wrong:
+Wrong — wrong order, or omitting DS globals:
 
-```tsx
-import '@aircall/blocks/globals.css';
-import '@aircall/ds/globals.css';
+```css
+@import '@aircall/blocks/globals.css';
+@import '@aircall/ds/globals.css';
 ```
 
-Correct:
+```css
+/* missing DS globals entirely */
+@import '@aircall/blocks/globals.css';
+```
 
-```tsx
-import '@aircall/ds/globals.css';
-import '@aircall/blocks/globals.css';
+Correct — DS globals first, then blocks globals:
+
+```css
+@import '@aircall/ds/globals.css';
+@import '@aircall/blocks/globals.css';
 ```
 
-The blocks bundle layers page-layout tokens on top of the DS reset/tokens; loading it first (or without DS) leaves block compositions with missing base tokens and broken layout.
+`@aircall/blocks/globals.css` is a delta build — it contains only blocks-specific tokens
+and utility classes. It depends on DS globals being loaded first to provide Preflight and
+DS token definitions. Loading blocks before DS means DS's base reset (`border-color:
+var(--color-border)`) lands after blocks and within the same `@layer base`, and component
+tokens like `--background` and `--border` may not be defined when blocks tries to use them.
 
 Source: aircall/hydra:docs/migration-guides/tractor-to-ds/00-setup.md (§3)
 
+### MEDIUM — Using bare specifiers without `.css` in Rsbuild/webpack
+
+Wrong:
+
+```css
+@import 'tailwindcss/theme';
+@import 'tailwindcss/utilities';
+```
+
+Correct:
+
+```css
+@import 'tailwindcss/theme.css';
+@import 'tailwindcss/utilities.css';
+```
+
+The bare form (no `.css`) silently produces no output in webpack/Rsbuild PostCSS
+pipelines — classes like `flex`, `gap-4`, `text-sm` are never generated. Always
+use the `.css` extension when splitting Tailwind imports.
+
 ### MEDIUM — Installing @aircall/blocks without @aircall/ds
 
 Wrong: