@aircall/blocks 0.14.0 → 0.15.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Badge, Button, CounterBadge, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, SidebarProvider, TabsList, useSidebar } from "@aircall/ds";
 import * as React$1 from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as _tanstack_react_form0 from "@tanstack/react-form";
 import { DeepKeys, DeepKeysOfType, DeepValue, FieldAsyncValidateOrFn, FieldListeners, FieldValidateOrFn, FieldValidators } from "@tanstack/react-form";
@@ -119,7 +119,7 @@ declare function ChatbotResponseBlock({
   sources,
   onFeedback,
   className
-}: ChatbotResponseBlockProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotResponseBlockProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/chatbot-response-loading.d.ts
 interface ChatbotResponseLoadingProps {
@@ -146,7 +146,7 @@ interface ChatbotResponseLoadingProps {
 declare function ChatbotResponseLoading({
   text,
   className
-}: ChatbotResponseLoadingProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotResponseLoadingProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/chatbot-page.d.ts
 declare const ChatbotPage: React$1.ForwardRefExoticComponent<ChatbotPageProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -322,7 +322,7 @@ declare function ChatbotPanelHeader({
   onClose,
   className,
   ...props
-}: ChatbotPanelHeaderProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotPanelHeaderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/chatbot-sidebar.d.ts
 interface ChatbotSidebarConversation {
@@ -425,7 +425,7 @@ declare function ChatbotInput({
   activeConversationId,
   onSelectConversation,
   ...textareaProps
-}: ChatbotInputProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotInputProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/copy-button.d.ts
 declare const CopyButton: React$1.ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -461,7 +461,7 @@ type ChatbotPanelSuggestionProps = Omit<React.ComponentProps<typeof Button>, 'va
 declare function ChatbotPanelSuggestion({
   className,
   ...props
-}: ChatbotPanelSuggestionProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotPanelSuggestionProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/chatbot-user-message.d.ts
 type ChatbotUserMessageProps = React.ComponentProps<'div'>;
@@ -469,7 +469,7 @@ declare function ChatbotUserMessage({
   className,
   children,
   ...props
-}: ChatbotUserMessageProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotUserMessageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/dashboard-standalone-page.d.ts
 declare const DashboardStandalonePage: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -626,6 +626,68 @@ declare namespace RoleBadge {
   type Props = RoleBadgeProps;
 }
 //#endregion
+//#region src/components/score-badge.d.ts
+/**
+ * The fixed semantic score palette. Each tone maps to a DS `Badge` `color` +
+ * `tone` pair, so every ScoreBadge stays on the design-system palette (dark-mode
+ * + contrast handled by `Badge`). The colors are not consumer-customisable — only
+ * the band boundaries are (see {@link ScoreThresholds}).
+ */
+type ScoreTone = 'success' | 'success-alt' | 'warning' | 'destructive' | 'destructive-strong' | 'muted';
+/** A single color band: a value at or above `from` (and below the next band) renders with `tone`. */
+type ScoreThreshold = {
+  /** Inclusive lower bound of the band. */from: number; /** Which semantic {@link ScoreTone} the band paints. */
+  tone: ScoreTone;
+};
+/** An ordered set of color bands mapping a numeric score to a {@link ScoreTone}. */
+type ScoreThresholds = ScoreThreshold[];
+/** How a {@link ScoreBadge} formats its number: a bare number or a percentage. */
+type ScoreKind = 'number' | 'percent';
+/**
+ * The default color bands, from the Figma ScoreBadge spec (0–100 scale):
+ * `≥85` excellent, `70–84` good, `50–69` fair, `20–49` poor, `<20` very poor.
+ */
+declare const PERCENTAGE_THRESHOLDS: ScoreThresholds;
+type ScoreBadgeProps = Omit<React$1.ComponentProps<typeof Badge>, 'color' | 'tone' | 'children'> & {
+  /**
+   * The numeric score. Drives both the pill color (via `thresholds`) and the
+   * displayed number. `null`/`undefined` or a non-finite value (`NaN`/`±Infinity`)
+   * renders a muted `"--"`. Finite out-of-range values render as-is (not clamped).
+   */
+  value?: number | null;
+  /**
+   * How the value is formatted — a bare number, or a `%` percentage (0–100 scale).
+   * @default 'number'
+   */
+  kind?: ScoreKind;
+  /**
+   * Color bands mapping the value to a tone.
+   * @default PERCENTAGE_THRESHOLDS
+   */
+  thresholds?: ScoreThresholds;
+  /**
+   * Extra `Intl.NumberFormat` options merged over the per-kind defaults — e.g.
+   * `{ maximumFractionDigits: 0 }` for no decimals, `{ signDisplay: 'always' }`.
+   * For `kind='percent'` the value is scaled to a 0–1 fraction, so don't override `style`.
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+};
+declare namespace ScoreBadge {
+  type Props = ScoreBadgeProps;
+}
+/**
+ * A score pill. Composes DS `Badge`: derives its color from `value` against
+ * `thresholds` and renders the value, locale-formatted per `kind`.
+ *
+ * @example
+ * ```tsx
+ * <ScoreBadge value={90.66666} />                 // "90.7"
+ * <ScoreBadge value={90.66666} kind="percent" />  // "90.7%"
+ * <ScoreBadge value={4} thresholds={CSAT} formatOptions={{ maximumFractionDigits: 0 }} /> // "4"
+ * ```
+ */
+declare const ScoreBadge: React$1.ForwardRefExoticComponent<Omit<ScoreBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
 //#region src/components/chatbot-panel-trigger.d.ts
 type ChatbotPanelTriggerProps = Omit<React$1.ComponentProps<typeof Button>, 'variant' | 'size' | 'disabled'> & {
   /** The copy revealed when the trigger expands (hover / focus / pressed). */children?: React$1.ReactNode; /** Leading icon. Defaults to the Aircall logo mark. */
@@ -644,7 +706,7 @@ declare function ChatbotPanelTrigger({
   icon,
   className,
   ...buttonProps
-}: ChatbotPanelTriggerProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotPanelTriggerProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/chatbot-expand-suggestion.d.ts
 interface ChatbotExpandSuggestionCategory {
@@ -750,7 +812,7 @@ declare function ChatbotPanel({
   style,
   children,
   ...props
-}: ChatbotPanelProps): react_jsx_runtime4.JSX.Element;
+}: ChatbotPanelProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/use-copy-to-clipboard.d.ts
 interface UseCopyToClipboardOptions {
@@ -787,7 +849,7 @@ declare function CardSaveBar({
   submitLabel,
   savingLabel,
   resetLabel
-}: CardSaveBarProps): react_jsx_runtime4.JSX.Element;
+}: CardSaveBarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/submit-button.d.ts
 /**
@@ -811,7 +873,7 @@ declare function SubmitButton({
   loadingLabel,
   className,
   ...buttonProps
-}: SubmitButtonProps): react_jsx_runtime4.JSX.Element;
+}: SubmitButtonProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/form/use-form.d.ts
 /**
@@ -1473,7 +1535,7 @@ declare function FormFieldShell({
   orientation,
   controlPosition,
   controlVariant
-}: FormFieldShellProps): react_jsx_runtime4.JSX.Element;
+}: FormFieldShellProps): react_jsx_runtime0.JSX.Element;
 /**
  * Precisely-typed view of the bound field handed to a wrapper's `children`.
  * `TData` is `DeepValue<TFormData, TName>` — so `value` and `handleChange` are the field's
@@ -1597,7 +1659,7 @@ type FormFieldBaseProps<TData, TControl> = {
  * Field-name/value/validator typing is enforced at each wrapper's boundary; this just renders
  * the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
  */
-declare function FormFieldBase<TData, TControl>(props: FormFieldBaseProps<TData, TControl>): react_jsx_runtime4.JSX.Element;
+declare function FormFieldBase<TData, TControl>(props: FormFieldBaseProps<TData, TControl>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-select-field.d.ts
 /**
@@ -1643,7 +1705,7 @@ type FormSelectFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<
  *   )}
  * </FormSelectField>
  */
-declare function FormSelectField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormSelectFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormSelectField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormSelectFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-input-field.d.ts
 /**
@@ -1677,7 +1739,7 @@ type FormInputFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<T
  *   {(field, { inputProps }) => <Input {...inputProps} type="email" placeholder="you@co.com" />}
  * </FormInputField>
  */
-declare function FormInputField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormInputFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormInputField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormInputFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-combobox-field.d.ts
 /**
@@ -1724,7 +1786,7 @@ type FormComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeysOfTyp
  *   )}
  * </FormComboboxField>
  */
-declare function FormComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormComboboxFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormComboboxFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-multi-combobox-field.d.ts
 /**
@@ -1765,7 +1827,7 @@ type FormMultiComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeys
  *   )}
  * </FormMultiComboboxField>
  */
-declare function FormMultiComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>>(props: FormMultiComboboxFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormMultiComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>>(props: FormMultiComboboxFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-array-field.d.ts
 /**
@@ -1839,7 +1901,7 @@ type FormArrayFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<T
  *   )}
  * </FormArrayField>
  */
-declare function FormArrayField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>>(props: FormArrayFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormArrayField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>>(props: FormArrayFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-textarea-field.d.ts
 /**
@@ -1873,7 +1935,7 @@ type FormTextareaFieldProps<TForm extends BoundForm, TName extends DeepKeysOfTyp
  *   {(field, { textareaProps }) => <Textarea {...textareaProps} rows={4} />}
  * </FormTextareaField>
  */
-declare function FormTextareaField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormTextareaFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormTextareaField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormTextareaFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-radio-group-field.d.ts
 /**
@@ -1914,7 +1976,7 @@ type FormRadioGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOfT
  *   )}
  * </FormRadioGroupField>
  */
-declare function FormRadioGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormRadioGroupFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormRadioGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormRadioGroupFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-otp-field.d.ts
 /**
@@ -1949,7 +2011,7 @@ type FormOTPFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TFo
  *   {(field, { otpProps }) => <InputOTP maxLength={6} {...otpProps}>{slots}</InputOTP>}
  * </FormOTPField>
  */
-declare function FormOTPField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormOTPFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormOTPField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormOTPFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-switch-field.d.ts
 /**
@@ -1986,7 +2048,7 @@ type FormSwitchFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<
  *   {(field, { switchProps }) => <Switch {...switchProps} />}
  * </FormSwitchField>
  */
-declare function FormSwitchField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>>(props: FormSwitchFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormSwitchField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>>(props: FormSwitchFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-numeric-field.d.ts
 /**
@@ -2020,7 +2082,7 @@ type FormNumericFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType
  *   {(field, { numericProps }) => <NumericInput {...numericProps} />}
  * </FormNumericField>
  */
-declare function FormNumericField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormNumericFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormNumericField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormNumericFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-slider-field.d.ts
 /**
@@ -2060,7 +2122,7 @@ type FormSliderFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<
  *   {(field, { sliderProps }) => <Slider min={0} max={100} step={1} {...sliderProps} />}
  * </FormSliderField>
  */
-declare function FormSliderField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormSliderFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormSliderField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormSliderFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-toggle-group-field.d.ts
 /**
@@ -2101,7 +2163,7 @@ type FormToggleGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOf
  *   )}
  * </FormToggleGroupField>
  */
-declare function FormToggleGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string | null>>(props: FormToggleGroupFieldProps<TForm, TName>): react_jsx_runtime4.JSX.Element;
+declare function FormToggleGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string | null>>(props: FormToggleGroupFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/form/field-errors.d.ts
 /**
@@ -2149,7 +2211,7 @@ declare function SaveBar({
   savingLabel,
   resetLabel,
   className
-}: SaveBarProps): react_jsx_runtime4.JSX.Element;
+}: SaveBarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/dashboard-sidebar-nav.d.ts
 type DashboardSidebarNavSubmenuSeparator = {
@@ -2233,7 +2295,7 @@ type DashboardSidebarNavProps = {
 declare function DashboardSidebarNav({
   groups,
   renderLink
-}: DashboardSidebarNavProps): react_jsx_runtime4.JSX.Element;
+}: DashboardSidebarNavProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/dashboard-sidebar.d.ts
 declare const DashboardSidebarProvider: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarProviderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -2333,4 +2395,4 @@ declare namespace DashboardSidebarSubmenuSeparator {
   type Props = DashboardSidebarSubmenuSeparatorProps;
 }
 //#endregion
-export { type ArrayField, type ArrayItem, BetaBadge, type BoundForm, CardSaveBar, type CardSaveBarProps, ChatbotExpandSuggestion, type ChatbotExpandSuggestionProps, ChatbotInput, type ChatbotInputProps, type ChatbotInputSuggestion, ChatbotPage, ChatbotPageBody, type ChatbotPageBodyProps, ChatbotPageContent, type ChatbotPageContentProps, ChatbotPageConversation, type ChatbotPageConversationProps, ChatbotPageFooter, type ChatbotPageFooterProps, ChatbotPageHeading, type ChatbotPageHeadingProps, ChatbotPageInputBar, type ChatbotPageInputBarProps, type ChatbotPageProps, ChatbotPanel, ChatbotPanelHeader, type ChatbotPanelHeaderProps, type ChatbotPanelProps, ChatbotPanelSuggestion, type ChatbotPanelSuggestionItem, type ChatbotPanelSuggestionProps, ChatbotPanelTrigger, type ChatbotPanelTriggerProps, ChatbotResponseBlock, type ChatbotResponseBlockFeedback, type ChatbotResponseBlockProps, ChatbotResponseLoading, type ChatbotResponseLoadingProps, ChatbotSidebar, type ChatbotSidebarConversation, ChatbotUserMessage, type ChatbotUserMessageProps, type ComboboxControl, 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, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageDescription, DashboardStandalonePageHeader, DashboardStandalonePageMain, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, type FieldBindingProps, FormArrayField, type FormArrayFieldProps, FormComboboxField, type FormComboboxFieldProps, FormFieldBase, FormFieldShell, type FormFieldShellProps, type FormFieldValidators, FormInputField, type FormInputFieldProps, FormMultiComboboxField, type FormMultiComboboxFieldProps, FormNumericField, type FormNumericFieldProps, FormOTPField, type FormOTPFieldProps, FormRadioGroupField, type FormRadioGroupFieldProps, FormSelectField, type FormSelectFieldProps, FormSliderField, type FormSliderFieldProps, FormSwitchField, type FormSwitchFieldProps, FormTextareaField, type FormTextareaFieldProps, FormToggleGroupField, type FormToggleGroupFieldProps, type InputControl, type MultiComboboxControl, type NecessityProps, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, type NumericControl, type OTPControl, ProfessionalBadge, type RadioGroupControl, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, type RoleBadgeRole, SaveBar, type SaveBarProps, type SelectControl, type SliderControl, SubmitButton, type SubmitButtonProps, type SwitchControl, type TextareaControl, type ToggleGroupControl, TrialBadge, type TypedField, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };
+export { type ArrayField, type ArrayItem, BetaBadge, type BoundForm, CardSaveBar, type CardSaveBarProps, ChatbotExpandSuggestion, type ChatbotExpandSuggestionProps, ChatbotInput, type ChatbotInputProps, type ChatbotInputSuggestion, ChatbotPage, ChatbotPageBody, type ChatbotPageBodyProps, ChatbotPageContent, type ChatbotPageContentProps, ChatbotPageConversation, type ChatbotPageConversationProps, ChatbotPageFooter, type ChatbotPageFooterProps, ChatbotPageHeading, type ChatbotPageHeadingProps, ChatbotPageInputBar, type ChatbotPageInputBarProps, type ChatbotPageProps, ChatbotPanel, ChatbotPanelHeader, type ChatbotPanelHeaderProps, type ChatbotPanelProps, ChatbotPanelSuggestion, type ChatbotPanelSuggestionItem, type ChatbotPanelSuggestionProps, ChatbotPanelTrigger, type ChatbotPanelTriggerProps, ChatbotResponseBlock, type ChatbotResponseBlockFeedback, type ChatbotResponseBlockProps, ChatbotResponseLoading, type ChatbotResponseLoadingProps, ChatbotSidebar, type ChatbotSidebarConversation, ChatbotUserMessage, type ChatbotUserMessageProps, type ComboboxControl, 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, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageDescription, DashboardStandalonePageHeader, DashboardStandalonePageMain, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, type FieldBindingProps, FormArrayField, type FormArrayFieldProps, FormComboboxField, type FormComboboxFieldProps, FormFieldBase, FormFieldShell, type FormFieldShellProps, type FormFieldValidators, FormInputField, type FormInputFieldProps, FormMultiComboboxField, type FormMultiComboboxFieldProps, FormNumericField, type FormNumericFieldProps, FormOTPField, type FormOTPFieldProps, FormRadioGroupField, type FormRadioGroupFieldProps, FormSelectField, type FormSelectFieldProps, FormSliderField, type FormSliderFieldProps, FormSwitchField, type FormSwitchFieldProps, FormTextareaField, type FormTextareaFieldProps, FormToggleGroupField, type FormToggleGroupFieldProps, type InputControl, type MultiComboboxControl, type NecessityProps, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, type NumericControl, type OTPControl, PERCENTAGE_THRESHOLDS, ProfessionalBadge, type RadioGroupControl, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, type RoleBadgeRole, SaveBar, type SaveBarProps, ScoreBadge, type ScoreKind, type ScoreThreshold, type ScoreThresholds, type ScoreTone, type SelectControl, type SliderControl, SubmitButton, type SubmitButtonProps, type SwitchControl, type TextareaControl, type ToggleGroupControl, TrialBadge, type TypedField, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { 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, 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";
@@ -2062,6 +2062,123 @@ const RoleBadge = React.forwardRef((componentProps, forwardRef) => {
 });
 RoleBadge.displayName = "RoleBadge";
 
+//#endregion
+//#region src/components/score-badge.tsx
+const SCORE_TONE_BADGE = {
+	success: {
+		color: "green",
+		tone: "medium-light"
+	},
+	"success-alt": {
+		color: "green",
+		tone: "light"
+	},
+	warning: {
+		color: "yellow",
+		tone: "light"
+	},
+	destructive: {
+		color: "red",
+		tone: "light"
+	},
+	"destructive-strong": {
+		color: "red",
+		tone: "medium-light"
+	},
+	muted: {
+		color: "charcoal",
+		tone: "medium-light"
+	}
+};
+/**
+* The default color bands, from the Figma ScoreBadge spec (0–100 scale):
+* `≥85` excellent, `70–84` good, `50–69` fair, `20–49` poor, `<20` very poor.
+*/
+const PERCENTAGE_THRESHOLDS = [
+	{
+		from: 85,
+		tone: "success"
+	},
+	{
+		from: 70,
+		tone: "success-alt"
+	},
+	{
+		from: 50,
+		tone: "warning"
+	},
+	{
+		from: 20,
+		tone: "destructive"
+	},
+	{
+		from: 0,
+		tone: "destructive-strong"
+	}
+];
+/** Highest band whose `from` is ≤ value wins; a value below every band → muted. */
+function resolveTone(value, thresholds) {
+	return [...thresholds].sort((a, b) => b.from - a.from).find((t) => value >= t.from)?.tone ?? "muted";
+}
+/**
+* Format a numeric score for display in the given locale (via `Intl.NumberFormat`),
+* and report the value rounded to the *same* precision.
+* - `number`: the value as-is — at most one decimal, trailing zeros dropped
+*   (`en`: `90.66666 → "90.7"`, `4 → "4"`; `fr`: `90,7`).
+* - `percent`: a 0–100 score shown with a `%` suffix (`90.66666 → "90.7%"`; `fr`: `90,7 %`).
+*
+* `formatOptions` are merged over the per-kind defaults — e.g.
+* `{ maximumFractionDigits: 0 }` to drop decimals, `{ minimumFractionDigits: 2 }` for more.
+*
+* `rounded` is the value rounded to the displayed precision; the pill color is
+* resolved from it (not the raw value) so the color always matches the shown
+* number — e.g. `3.6` displayed as `"4"` is colored as a 4, not a 3.6.
+*/
+function formatScore(value, kind, locale, formatOptions) {
+	const options = kind === "percent" ? {
+		style: "percent",
+		maximumFractionDigits: 1,
+		...formatOptions
+	} : {
+		maximumFractionDigits: 1,
+		...formatOptions
+	};
+	const formatter = new Intl.NumberFormat(locale, options);
+	const digits = formatter.resolvedOptions().maximumFractionDigits ?? 0;
+	return {
+		label: formatter.format(kind === "percent" ? value / 100 : value),
+		rounded: Number(value.toFixed(digits))
+	};
+}
+/**
+* A score pill. Composes DS `Badge`: derives its color from `value` against
+* `thresholds` and renders the value, locale-formatted per `kind`.
+*
+* @example
+* ```tsx
+* <ScoreBadge value={90.66666} />                 // "90.7"
+* <ScoreBadge value={90.66666} kind="percent" />  // "90.7%"
+* <ScoreBadge value={4} thresholds={CSAT} formatOptions={{ maximumFractionDigits: 0 }} /> // "4"
+* ```
+*/
+const ScoreBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { value, kind = "number", thresholds = PERCENTAGE_THRESHOLDS, formatOptions, className, ...props } = componentProps;
+	const locale = useDsLocale();
+	const score = value != null && Number.isFinite(value) ? value : null;
+	const formatted = score === null ? null : formatScore(score, kind, locale, formatOptions);
+	const { color, tone: badgeTone } = SCORE_TONE_BADGE[formatted === null ? "muted" : resolveTone(formatted.rounded, thresholds)];
+	return /* @__PURE__ */ jsx(Badge, {
+		ref: forwardRef,
+		"data-slot": "score-badge",
+		color,
+		tone: badgeTone,
+		className: cn("tabular-nums", className),
+		...props,
+		children: formatted === null ? "--" : formatted.label
+	});
+});
+ScoreBadge.displayName = "ScoreBadge";
+
 //#endregion
 //#region src/components/chatbot-panel-trigger.tsx
 /**
@@ -3280,4 +3397,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, 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, PERCENTAGE_THRESHOLDS, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, ScoreBadge, 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.14.0",
+  "version": "0.15.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.20.0",
+    "@aircall/ds": "0.21.0",
     "@aircall/hooks": "0.5.1"
   },
   "keywords": [