@aircall/blocks 0.18.0 → 0.18.1

package/dist/index.js

@@ -1,15 +1,15 @@
-import { Anchor, Badge, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, 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, useDsLocale, useDsTranslation, useSidebar } from "@aircall/ds";
+import { Anchor, Badge, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, 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, Skeleton, Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TabsList, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsLocale, 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, Frown, History, LockKeyhole, Meh, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Smile, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
+import { AircallLoader, AircallLogo, AircallMark, ArrowDownRight, ArrowUp, ArrowUpRight, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, Frown, History, LockKeyhole, Meh, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Smile, 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";
 import { cva } from "class-variance-authority";
-import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 
 //#region src/i18n/locales/de.ts
 const de = {
@@ -2523,6 +2523,380 @@ const ScoreBadge = React.forwardRef((componentProps, forwardRef) => {
 });
 ScoreBadge.displayName = "ScoreBadge";
 
+//#endregion
+//#region src/helpers/format-kpi.ts
+/** Empty KPI placeholder matching Figma empty tiles and ScoreBadge. */
+const KPI_EMPTY = "--";
+/** Default secondary unit for clock durations. */
+function clockDurationUnit(scale) {
+	return scale === "hours" ? "hr/min" : "min/sec";
+}
+/**
+* Locale decimal separator (e.g. `.` for `en-US`, `,` for `fr-FR`).
+*/
+function getDecimalSeparator(locale) {
+	return new Intl.NumberFormat(locale).formatToParts(1.1).find((p) => p.type === "decimal")?.value ?? ".";
+}
+/**
+* Split a locale-formatted number on its decimal separator so the integer group
+* can use primary typography and the fraction (+ unit) secondary typography.
+*/
+function splitFormattedNumber(formatted, locale) {
+	const dec = getDecimalSeparator(locale);
+	const idx = formatted.indexOf(dec);
+	if (idx === -1) return {
+		primary: formatted,
+		secondary: ""
+	};
+	return {
+		primary: formatted.slice(0, idx),
+		secondary: formatted.slice(idx)
+	};
+}
+/**
+* Split a duration string on the leading digit run (`"1h 2min 3s"` → `"1"` + `"h 2min 3s"`).
+*/
+function splitLeadingDigits(text) {
+	const match = /^(\d+)([\s\S]*)$/.exec(text);
+	if (!match) return null;
+	return {
+		primary: match[1],
+		secondary: match[2]
+	};
+}
+/**
+* Format seconds into a readable duration (e.g. `1h 2min 3s`).
+* Implemented without `date-fns`.
+*
+* @example
+* formatSecondsToDuration(0) // => "0s"
+* formatSecondsToDuration(60) // => "1min 0s"
+* formatSecondsToDuration(3600) // => "1h 0min 0s"
+*/
+function formatSecondsToDuration(totalSeconds) {
+	const s = Math.max(0, Math.floor(totalSeconds));
+	const days = Math.floor(s / 86400);
+	const hours = Math.floor(s % 86400 / 3600);
+	const minutes = Math.floor(s % 3600 / 60);
+	const seconds = s % 60;
+	if (days) return `${days}d ${hours}h ${minutes}min ${seconds}s`;
+	if (hours) return `${hours}h ${minutes}min ${seconds}s`;
+	if (minutes) return `${minutes}min ${seconds}s`;
+	return `${seconds}s`;
+}
+/**
+* Format seconds as a zero-padded clock duration (`HH:MM` / `MM:SS`).
+* The full clock string is primary typography; the unit is appended separately.
+*
+* @example
+* formatSecondsToClock(75180, 'hours') // => { primary: "20:53", secondary: "" }
+* formatSecondsToClock(304, 'minutes') // => { primary: "05:04", secondary: "" }
+*/
+function formatSecondsToClock(totalSeconds, scale) {
+	const s = Math.max(0, Math.floor(totalSeconds));
+	if (scale === "hours") {
+		const hours = Math.floor(s / 3600);
+		const minutes$1 = Math.floor(s % 3600 / 60);
+		return {
+			primary: `${String(hours).padStart(2, "0")}:${String(minutes$1).padStart(2, "0")}`,
+			secondary: ""
+		};
+	}
+	const minutes = Math.floor(s / 60);
+	const seconds = s % 60;
+	return {
+		primary: `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`,
+		secondary: ""
+	};
+}
+/**
+* Format a KPI `value` for split typography display.
+* Returns `null` for empty / non-finite values (caller renders {@link KPI_EMPTY}).
+*
+* Contract:
+* - `string` is always opaque text (`kind` is ignored). Coerce at the call site
+*   if the API sent a numeric string and you need `number` / `percent` / `duration`.
+* - `number` / `percent` / `duration` require a finite `number`.
+*/
+function formatKpiValue(value, kind, locale, { formatOptions, durationStyle = "long", durationScale = "minutes" } = {}) {
+	if (kind === "text" || typeof value === "string") {
+		const text = String(value);
+		if (text === "") return null;
+		return {
+			primary: text,
+			secondary: ""
+		};
+	}
+	if (!Number.isFinite(value)) return null;
+	if (kind === "duration") {
+		if (durationStyle === "clock") return formatSecondsToClock(value, durationScale);
+		const formatted = formatSecondsToDuration(value);
+		return splitLeadingDigits(formatted) ?? {
+			primary: formatted,
+			secondary: ""
+		};
+	}
+	const options = kind === "percent" ? {
+		style: "percent",
+		maximumFractionDigits: 1,
+		...formatOptions
+	} : {
+		maximumFractionDigits: 1,
+		minimumFractionDigits: 0,
+		...formatOptions
+	};
+	return splitFormattedNumber(new Intl.NumberFormat(locale, options).format(kind === "percent" ? value / 100 : value), locale);
+}
+
+//#endregion
+//#region src/components/kpi.tsx
+const TREND_ICON = {
+	up: ArrowUpRight,
+	down: ArrowDownRight,
+	neutral: Minus
+};
+const TONE_CLASS = {
+	positive: "text-chart-1",
+	negative: "text-destructive",
+	neutral: "text-muted-foreground"
+};
+const KpiCardContext = React.createContext(null);
+function useKpiCardDisabled() {
+	return React.useContext(KpiCardContext)?.disabled ?? false;
+}
+function resolveKind(value, kind) {
+	if (typeof value === "string") return "text";
+	if (kind) return kind;
+	return "number";
+}
+function TrendGlyph({ trend, tone, className }) {
+	const Icon = TREND_ICON[trend];
+	return /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": "true",
+		className: cn("shrink-0", TONE_CLASS[tone], className)
+	});
+}
+/**
+* KPI tile container. Thin wrapper around DS `Card` (`size="sm"` by default)
+* that provides a `disabled` context for nested {@link KpiValue}s.
+* When `disabled`, applies `opacity-50` and `cursor-not-allowed`, and blocks
+* activation of nested interactive values.
+* Compose with DS `CardHeader` / `CardTitle` / `CardContent` / `CardAction`,
+* {@link KpiValue}, and {@link KpiDescription}.
+*
+* @example
+* ```tsx
+* import { CardHeader, CardTitle, CardContent } from '@aircall/ds';
+* import { KpiCard, KpiValue, KpiDescription } from '@aircall/blocks';
+*
+* <KpiCard>
+*   <CardHeader>
+*     <CardTitle>Answered</CardTitle>
+*   </CardHeader>
+*   <CardContent className="flex flex-col gap-1">
+*     <KpiValue value={123.1} kind="percent" trend="up" tone="positive" />
+*     <KpiDescription trend="up" tone="positive">+2.48% vs previous period</KpiDescription>
+*   </CardContent>
+* </KpiCard>
+* ```
+*/
+const KpiCard = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "sm", disabled = false, children, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(KpiCardContext.Provider, {
+		value: { disabled },
+		children: /* @__PURE__ */ jsx(Card, {
+			ref: forwardRef,
+			"data-slot": "kpi-card",
+			"data-disabled": disabled || void 0,
+			"aria-disabled": disabled || void 0,
+			size,
+			className: cn("gap-2 data-[size=sm]:gap-2", disabled && "cursor-not-allowed opacity-50", className),
+			...props,
+			children
+		})
+	});
+});
+KpiCard.displayName = "KpiCard";
+/**
+* KPI metric value. Formats via `useDsLocale` and renders primary (and optional
+* secondary) typography, with trend variants. Passing `onClick` makes the value
+* interactive (button + dotted underline). Prefer {@link KpiCard}`s `disabled`
+* for tile-level muting; a local `disabled` still works for standalone use.
+* Compose inside DS `CardContent` with {@link KpiDescription}.
+*
+* Prop naming: `kind` + `formatOptions` for formatting; `trend` is direction
+* (icon); `tone` is meaning (color) — "up" is not always good.
+*
+* @example
+* ```tsx
+* <KpiValue value={123.1} kind="percent" trend="up" tone="positive" />
+* ```
+*/
+const KpiValue = React.forwardRef((componentProps, forwardRef) => {
+	const { className, value, kind: kindProp, formatOptions, durationStyle = "long", durationScale = "minutes", unit, trend, tone = "neutral", active = false, disabled: disabledProp = false, children, onClick, render, ...props } = componentProps;
+	const locale = useDsLocale();
+	const cardDisabled = useKpiCardDisabled();
+	const isDisabled = Boolean(disabledProp || cardDisabled);
+	const isInteractive = typeof onClick === "function";
+	const kind = resolveKind(value, kindProp);
+	let content;
+	const valueUnderlineClassName = cn(isInteractive && "border-b border-current", isInteractive && !active && "border-dotted", isInteractive && active && "border-solid");
+	const trendGlyph = trend ? /* @__PURE__ */ jsx(TrendGlyph, {
+		trend,
+		tone: disabledProp && !cardDisabled ? "neutral" : tone,
+		className: "size-6"
+	}) : null;
+	if (children != null) content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-baseline gap-0.5", valueUnderlineClassName),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-3xl font-bold",
+			children
+		}), unit != null && unit !== "" && /* @__PURE__ */ jsx("span", {
+			className: "pt-2 text-xl leading-none font-semibold",
+			children: unit
+		})]
+	}), trendGlyph] });
+	else {
+		const formatted = value == null || typeof value === "number" && !Number.isFinite(value) ? null : formatKpiValue(value, kind, locale, {
+			formatOptions,
+			durationStyle,
+			durationScale
+		});
+		const resolvedUnit = unit !== void 0 ? unit : kind === "duration" && durationStyle === "clock" ? clockDurationUnit(durationScale) : void 0;
+		const unitNode = resolvedUnit != null && resolvedUnit !== "" ? resolvedUnit : null;
+		if (!formatted) content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: cn("text-3xl font-bold", valueUnderlineClassName),
+			children: KPI_EMPTY
+		}), trendGlyph] });
+		else {
+			const hasSecondary = formatted.secondary !== "" || unitNode != null;
+			content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("inline-flex items-baseline gap-0.5", valueUnderlineClassName),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-3xl font-bold",
+					children: formatted.primary
+				}), hasSecondary && /* @__PURE__ */ jsxs("span", {
+					className: "pt-2 text-xl leading-none font-semibold",
+					children: [
+						formatted.secondary,
+						formatted.secondary !== "" && unitNode != null ? " " : null,
+						unitNode
+					]
+				})]
+			}), trendGlyph] });
+		}
+	}
+	const rootClassName = cn("inline-flex w-fit items-center gap-0.5 font-sans", disabledProp && !cardDisabled ? "text-muted-foreground" : active && isInteractive && !isDisabled ? "text-primary" : "text-foreground", isInteractive && !isDisabled && cn("cursor-pointer border-0 bg-transparent p-0 transition-colors active:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50", active ? "hover:text-primary/80" : "hover:text-muted-foreground"), isInteractive && isDisabled && "cursor-not-allowed border-0 bg-transparent p-0", className);
+	return useRender({
+		defaultTagName: isInteractive ? "button" : "div",
+		props: mergeProps({
+			ref: forwardRef,
+			className: rootClassName,
+			children: content,
+			...isInteractive ? {
+				type: "button",
+				onClick,
+				disabled: isDisabled,
+				"aria-pressed": active
+			} : isDisabled ? { "aria-disabled": true } : {}
+		}, props),
+		render,
+		state: {
+			slot: "kpi-value",
+			active,
+			disabled: isDisabled,
+			interactive: isInteractive,
+			trend,
+			tone
+		}
+	});
+});
+KpiValue.displayName = "KpiValue";
+/**
+* Supporting comparison / context line under a {@link KpiValue}. Compose as a
+* sibling inside DS `CardContent` — not the metric title (`CardTitle` owns that).
+*
+* Text stays foreground; `trend` / `tone` only color the trailing icon so an
+* upward change that is bad uses `trend="up" tone="negative"`.
+*
+* @example
+* ```tsx
+* <KpiDescription trend="up" tone="positive">+2.48% vs previous period</KpiDescription>
+* <KpiDescription trend="up" tone="negative">+12% abandoned</KpiDescription>
+* ```
+*/
+const KpiDescription = React.forwardRef(function KpiDescription(componentProps, forwardRef) {
+	const { className, trend, tone = "neutral", children, ...props } = componentProps;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
+		"data-slot": "kpi-description",
+		"data-trend": trend,
+		"data-tone": tone,
+		className: cn("inline-flex items-center gap-0.5 font-sans text-xs font-medium text-foreground", className),
+		...props,
+		children: [children, trend ? /* @__PURE__ */ jsx(TrendGlyph, {
+			trend,
+			tone,
+			className: "size-3"
+		}) : null]
+	});
+});
+KpiDescription.displayName = "KpiDescription";
+/**
+* Loading placeholder sized for a {@link KpiValue} row. Thin wrapper around
+* DS `Skeleton` (`h-4 w-[45px]` with vertical margin to match the value row).
+* Swap in place of {@link KpiValue} while data loads.
+*
+* @example
+* ```tsx
+* <CardContent>
+*   {loading ? <KpiValueSkeleton /> : <KpiValue value={123} />}
+* </CardContent>
+* ```
+*/
+const KpiValueSkeleton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Skeleton, {
+		ref: forwardRef,
+		"data-slot": "kpi-value-skeleton",
+		className: cn("my-[9px] h-4 w-[45px]", className),
+		...props
+	});
+});
+KpiValueSkeleton.displayName = "KpiValueSkeleton";
+/**
+* Loading placeholder sized for a {@link KpiDescription} row. Thin wrapper
+* around DS `Skeleton` (`12×144`, matching `text-xs` comparison copy).
+* Swap in place of {@link KpiDescription} while data loads.
+*
+* @example
+* ```tsx
+* <CardContent className="flex flex-col gap-1">
+*   {loading ? (
+*     <>
+*       <KpiValueSkeleton />
+*       <KpiDescriptionSkeleton />
+*     </>
+*   ) : (
+*     <>
+*       <KpiValue value={123} />
+*       <KpiDescription>+2.48% vs previous period</KpiDescription>
+*     </>
+*   )}
+* </CardContent>
+* ```
+*/
+const KpiDescriptionSkeleton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Skeleton, {
+		ref: forwardRef,
+		"data-slot": "kpi-description-skeleton",
+		className: cn("h-3 w-36", className),
+		...props
+	});
+});
+KpiDescriptionSkeleton.displayName = "KpiDescriptionSkeleton";
+
 //#endregion
 //#region src/components/sentiment-badge.tsx
 const SENTIMENT_BADGE = {
@@ -4051,4 +4425,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, 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, PERCENTAGE_THRESHOLDS, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, ScoreBadge, SentimentBadge, SettingCard, SettingCardAction, SettingCardContent, SettingCardDescription, SettingCardHeader, SettingCardTitle, 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, KpiCard, KpiDescription, KpiDescriptionSkeleton, KpiValue, KpiValueSkeleton, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, PERCENTAGE_THRESHOLDS, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, ScoreBadge, SentimentBadge, SettingCard, SettingCardAction, SettingCardContent, SettingCardDescription, SettingCardHeader, SettingCardTitle, 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.18.0",
+  "version": "0.18.1",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -82,7 +82,7 @@
     "vite": "7.3.1",
     "vitest": "4.0.17",
     "zod": "4.4.3",
-    "@aircall/ds": "0.28.0",
+    "@aircall/ds": "0.28.1",
     "@aircall/hooks": "0.6.0"
   },
   "keywords": [

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

@@ -106,7 +106,7 @@ Components whose migration decision is still **TBD**, **TODO**, or **Ready for d
 | `FormWizard` + `useFormWizard` + `FormField` | `useForm`, `CommonForm`, `FormInputField`/`FormSelectField`/`FormComboboxField`/etc., `CardSaveBar`/`SaveBar` (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/form-wizard | available |
 | `Loading` | `Spinner` (and `Skeleton` for content placeholders) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/loading | available |
 | `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 |
+| `Tile` + `TileHeader` + `TileValue` | `KpiCard` + `KpiValue` + `KpiDescription` (+ `KpiValueSkeleton` / `KpiDescriptionSkeleton`) with DS `CardHeader` / `CardTitle` / `CardContent` / `CardAction` (@aircall/blocks + @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 |