@aircall/blocks 0.2.1 → 0.2.2

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { Badge, Button, CounterBadge, SidebarProvider, TabsList, useSidebar } from "@aircall/ds";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/copy-button.d.ts
 type CopyButtonProps = Omit<React.ComponentProps<typeof Button>, 'onClick' | 'variant'> & {
@@ -17,13 +20,13 @@ declare function CopyButton({
   variant,
   children,
   ...buttonProps
-}: CopyButtonProps): react_jsx_runtime23.JSX.Element;
+}: CopyButtonProps): react_jsx_runtime27.JSX.Element;
 interface CopyButtonIconProps {
   className?: string;
 }
 declare function CopyButtonIcon({
   className
-}: CopyButtonIconProps): react_jsx_runtime23.JSX.Element;
+}: CopyButtonIconProps): react_jsx_runtime27.JSX.Element;
 interface CopyButtonLabelProps {
   label?: string;
   copiedLabel?: string;
@@ -33,56 +36,56 @@ declare function CopyButtonLabel({
   label,
   copiedLabel,
   className
-}: CopyButtonLabelProps): react_jsx_runtime23.JSX.Element;
+}: CopyButtonLabelProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 //#region src/components/dashboard-page.d.ts
 declare function DashboardPage({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageBanner({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageMain({
   className,
   ...props
-}: React.ComponentProps<'main'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'main'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageTabs({
   className,
   ...props
-}: React.ComponentProps<typeof TabsList>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<typeof TabsList>): react_jsx_runtime27.JSX.Element;
 //#endregion
 //#region src/components/dashboard-page-header.d.ts
 declare function DashboardPageHeader({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderNav({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 type DashboardPageHeaderNavBackProps = Omit<React.ComponentProps<typeof Button>, 'variant' | 'size'>;
 declare function DashboardPageHeaderNavBack({
   children,
   ...props
-}: DashboardPageHeaderNavBackProps): react_jsx_runtime23.JSX.Element;
+}: DashboardPageHeaderNavBackProps): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderPrefix({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderTitleGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 type DashboardPageHeaderTitleProps = React.ComponentProps<'h1'> & {
   size?: 'lg' | 'sm';
 };
@@ -91,22 +94,22 @@ declare function DashboardPageHeaderTitle({
   className,
   children,
   ...props
-}: DashboardPageHeaderTitleProps): react_jsx_runtime23.JSX.Element;
+}: DashboardPageHeaderTitleProps): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderSubtitle({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderDescription({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardPageHeaderActions({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 type DashboardPageHeaderActionProps = Omit<React.ComponentProps<typeof Button>, 'size'> & {
   size?: 'lg' | 'icon-lg';
 };
@@ -119,7 +122,7 @@ declare const BetaBadge: {
   ({
     className,
     ...props
-  }: BadgeBaseProps): react_jsx_runtime23.JSX.Element;
+  }: BadgeBaseProps): react_jsx_runtime27.JSX.Element;
   displayName: string;
 };
 /** Green pill — recently launched feature */
@@ -127,7 +130,7 @@ declare const NewBadge: {
   ({
     className,
     ...props
-  }: BadgeBaseProps): react_jsx_runtime23.JSX.Element;
+  }: BadgeBaseProps): react_jsx_runtime27.JSX.Element;
   displayName: string;
 };
 /** Amber pill — feature being phased out */
@@ -135,7 +138,7 @@ declare const DeprecatedBadge: {
   ({
     className,
     ...props
-  }: BadgeBaseProps): react_jsx_runtime23.JSX.Element;
+  }: BadgeBaseProps): react_jsx_runtime27.JSX.Element;
   displayName: string;
 };
 /** Blue pill — user is in a trial period (same blue family as Beta) */
@@ -143,14 +146,14 @@ declare const TrialBadge: {
   ({
     className,
     ...props
-  }: BadgeBaseProps): react_jsx_runtime23.JSX.Element;
+  }: BadgeBaseProps): react_jsx_runtime27.JSX.Element;
   displayName: string;
 };
 /** Green pill — Professional tier (no gradient; uses default Badge variant) */
 declare function ProfessionalBadge({
   className,
   ...props
-}: BadgeBaseProps): react_jsx_runtime23.JSX.Element;
+}: BadgeBaseProps): react_jsx_runtime27.JSX.Element;
 type RoleBadgeRole = 'agent' | 'supervisor' | 'admin' | 'owner';
 type RoleBadgeProps = BadgeBaseProps & {
   /** The user's role within Aircall. */role: RoleBadgeRole;
@@ -159,7 +162,44 @@ declare function RoleBadge({
   role,
   className,
   ...props
-}: RoleBadgeProps): react_jsx_runtime23.JSX.Element;
+}: RoleBadgeProps): react_jsx_runtime27.JSX.Element;
+//#endregion
+//#region src/components/colorful-badge.d.ts
+declare const colorfulBadgeVariants: (props?: ({
+  color?: "charcoal" | "red" | "green" | "blue" | "purple" | "yellow" | "pink" | null | undefined;
+  tone?: "dark" | "medium-dark" | "medium-light" | "light" | null | undefined;
+  glow?: boolean | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type ColorfulBadgeVariants = VariantProps<typeof colorfulBadgeVariants>;
+type ColorfulBadgeColor = NonNullable<ColorfulBadgeVariants['color']>;
+type ColorfulBadgeTone = NonNullable<ColorfulBadgeVariants['tone']>;
+type ColorfulBadgeProps = Omit<React.ComponentProps<typeof Badge>, 'variant' | 'size' | 'color'> & ColorfulBadgeVariants & {
+  /**
+   * A legacy hard-coded tag hex (e.g. `#0761B5`) from the old palette. When
+   * provided it is resolved to the matching `color` + `tone` and overrides
+   * them — render existing tags without migrating their stored colors.
+   * Unknown values fall back to `charcoal` / `dark`.
+   */
+  legacyColor?: string;
+};
+/**
+ * A color-customizable badge. Pick a `color` and `tone`; optionally enable the
+ * AI `glow`. To render an existing tag, pass its stored hex via `legacyColor`.
+ * Icons (e.g. a leading `<Sparkles />` or a trailing close `<X />`) are composed
+ * as children, exactly like `Badge`.
+ */
+declare const ColorfulBadge: React.ForwardRefExoticComponent<Omit<ColorfulBadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Trailing remove affordance for a removable `ColorfulBadge`. Inspired by the
+ * ds `ComboboxChip` remove button: a ghost icon button that inherits the
+ * badge's text color and brightens on hover. Pass an `aria-label` and an
+ * `onClick`. Compose it as the last child of a `ColorfulBadge`.
+ */
+declare const ColorfulBadgeRemove: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.ButtonProps & VariantProps<(props?: ({
+  variant?: "link" | "default" | "secondary" | "outline" | "destructive" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+  block?: boolean | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/hooks/use-copy-to-clipboard.d.ts
 interface UseCopyToClipboardOptions {
@@ -256,7 +296,7 @@ type DashboardSidebarNavProps = {
 declare function DashboardSidebarNav({
   groups,
   renderLink
-}: DashboardSidebarNavProps): react_jsx_runtime23.JSX.Element;
+}: DashboardSidebarNavProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 //#region src/components/dashboard-sidebar.d.ts
 type DashboardSidebarProviderProps = React.ComponentProps<typeof SidebarProvider>;
@@ -264,34 +304,34 @@ declare function DashboardSidebarProvider({
   className,
   style,
   ...props
-}: DashboardSidebarProviderProps): react_jsx_runtime23.JSX.Element;
+}: DashboardSidebarProviderProps): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebar({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarHeader({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarTrigger({
   className,
   onClick,
   ...props
-}: React.ComponentProps<typeof Button>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<typeof Button>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarGroup({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarGroupLabel({
   className,
   render,
@@ -300,11 +340,11 @@ declare function DashboardSidebarGroupLabel({
 declare function DashboardSidebarMenu({
   className,
   ...props
-}: React.ComponentProps<'ul'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'ul'>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarMenuItem({
   className,
   ...props
-}: React.ComponentProps<'li'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'li'>): react_jsx_runtime27.JSX.Element;
 type DashboardSidebarMenuButtonProps = useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
   isActive?: boolean;
   /** Visual-only disabled state. The button remains clickable (e.g. to show an
@@ -327,11 +367,11 @@ declare const DashboardSidebarMenuButton: React.ForwardRefExoticComponent<Omit<D
 declare function DashboardSidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<typeof CounterBadge>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<typeof CounterBadge>): react_jsx_runtime27.JSX.Element;
 declare function DashboardSidebarSubmenu({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime27.JSX.Element;
 type DashboardSidebarSubmenuItemProps = useRender.ComponentProps<'div'> & React.ComponentProps<'div'> & {
   isActive?: boolean;
 };
@@ -345,6 +385,6 @@ declare function DashboardSidebarSubmenuSeparator({
   className
 }: {
   className?: string;
-}): react_jsx_runtime23.JSX.Element;
+}): react_jsx_runtime27.JSX.Element;
 //#endregion
-export { BetaBadge, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavProps, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DeprecatedBadge, NewBadge, ProfessionalBadge, RoleBadge, type RoleBadgeRole, TrialBadge, useCopyToClipboard, useSidebar as useDashboardSidebar };
+export { BetaBadge, ColorfulBadge, type ColorfulBadgeColor, ColorfulBadgeRemove, type ColorfulBadgeTone, 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 DashboardSidebarNavProps, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DeprecatedBadge, NewBadge, ProfessionalBadge, RoleBadge, type RoleBadgeRole, TrialBadge, colorfulBadgeVariants, useCopyToClipboard, useSidebar as useDashboardSidebar };

package/dist/index.js

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, SidebarProvider, TabsList, Tooltip, TooltipContent, TooltipTrigger, cn, useSidebar } from "@aircall/ds";
-import { Check, ChevronLeft, ChevronRight, Copy, PanelLeftClose, PanelLeftOpen } from "@aircall/react-icons";
+import { Check, ChevronLeft, ChevronRight, Copy, PanelLeftClose, PanelLeftOpen, X } from "@aircall/react-icons";
 import { useCallbackRef, useIsMounted, useUnmount } from "@aircall/hooks";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
@@ -266,6 +267,324 @@ function RoleBadge({ role, className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/colorful-badge.tsx
+const colorfulBadgeVariants = cva("h-[26px] gap-1 rounded-full border-transparent bg-[linear-gradient(0deg,var(--colorful-badge-overlay)_0%,var(--colorful-badge-overlay)_100%)]", {
+	variants: {
+		color: {
+			charcoal: "",
+			red: "",
+			green: "",
+			blue: "",
+			purple: "",
+			yellow: "",
+			pink: ""
+		},
+		tone: {
+			dark: "",
+			"medium-dark": "",
+			"medium-light": "",
+			light: ""
+		},
+		glow: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			color: "charcoal",
+			tone: "dark",
+			class: "bg-charcoal-900 text-charcoal-50"
+		},
+		{
+			color: "charcoal",
+			tone: "medium-dark",
+			class: "bg-charcoal-600 text-white"
+		},
+		{
+			color: "charcoal",
+			tone: "medium-light",
+			class: "bg-charcoal-300 text-charcoal-950"
+		},
+		{
+			color: "charcoal",
+			tone: "light",
+			class: "bg-charcoal-200 text-charcoal-950"
+		},
+		{
+			color: "red",
+			tone: "dark",
+			class: "bg-red-700 text-red-50"
+		},
+		{
+			color: "red",
+			tone: "medium-dark",
+			class: "bg-red-400 text-red-950"
+		},
+		{
+			color: "red",
+			tone: "medium-light",
+			class: "bg-red-300 text-red-950"
+		},
+		{
+			color: "red",
+			tone: "light",
+			class: "bg-red-200 text-red-800"
+		},
+		{
+			color: "green",
+			tone: "dark",
+			class: "bg-green-800 text-green-50"
+		},
+		{
+			color: "green",
+			tone: "medium-dark",
+			class: "bg-green-600 text-white"
+		},
+		{
+			color: "green",
+			tone: "medium-light",
+			class: "bg-green-300 text-green-950"
+		},
+		{
+			color: "green",
+			tone: "light",
+			class: "bg-green-200 text-green-950"
+		},
+		{
+			color: "blue",
+			tone: "dark",
+			class: "bg-blue-800 text-blue-50"
+		},
+		{
+			color: "blue",
+			tone: "medium-dark",
+			class: "bg-blue-600 text-white"
+		},
+		{
+			color: "blue",
+			tone: "medium-light",
+			class: "bg-blue-300 text-blue-950"
+		},
+		{
+			color: "blue",
+			tone: "light",
+			class: "bg-blue-200 text-blue-900"
+		},
+		{
+			color: "purple",
+			tone: "dark",
+			class: "bg-purple-800 text-purple-50"
+		},
+		{
+			color: "purple",
+			tone: "medium-dark",
+			class: "bg-purple-600 text-white"
+		},
+		{
+			color: "purple",
+			tone: "medium-light",
+			class: "bg-purple-300 text-purple-950"
+		},
+		{
+			color: "purple",
+			tone: "light",
+			class: "bg-purple-200 text-purple-900"
+		},
+		{
+			color: "yellow",
+			tone: "dark",
+			class: "bg-yellow-500 text-yellow-950"
+		},
+		{
+			color: "yellow",
+			tone: "medium-dark",
+			class: "bg-yellow-400 text-yellow-950"
+		},
+		{
+			color: "yellow",
+			tone: "medium-light",
+			class: "bg-yellow-300 text-black"
+		},
+		{
+			color: "yellow",
+			tone: "light",
+			class: "bg-yellow-200 text-yellow-900"
+		},
+		{
+			color: "pink",
+			tone: "dark",
+			class: "bg-pink-700 text-pink-50"
+		},
+		{
+			color: "pink",
+			tone: "medium-dark",
+			class: "bg-pink-500 text-pink-950"
+		},
+		{
+			color: "pink",
+			tone: "medium-light",
+			class: "bg-pink-300 text-pink-950"
+		},
+		{
+			color: "pink",
+			tone: "light",
+			class: "bg-pink-200 text-pink-900"
+		},
+		{
+			glow: true,
+			class: "drop-shadow-[0px_0px_3px_var(--cb-glow)] animate-colorful-badge-glow motion-reduce:animate-none"
+		},
+		{
+			color: "charcoal",
+			glow: true,
+			class: "border-charcoal-600 [--cb-glow:var(--color-charcoal-600)]"
+		},
+		{
+			color: "red",
+			glow: true,
+			class: "border-red-500 [--cb-glow:var(--color-red-500)]"
+		},
+		{
+			color: "green",
+			glow: true,
+			class: "border-green-600 [--cb-glow:var(--color-green-600)]"
+		},
+		{
+			color: "blue",
+			glow: true,
+			class: "border-blue-600 [--cb-glow:var(--color-blue-600)]"
+		},
+		{
+			color: "purple",
+			glow: true,
+			class: "border-purple-600 [--cb-glow:var(--color-purple-600)]"
+		},
+		{
+			color: "yellow",
+			glow: true,
+			class: "border-yellow-400 [--cb-glow:var(--color-yellow-400)]"
+		},
+		{
+			color: "pink",
+			glow: true,
+			class: "border-pink-600 [--cb-glow:var(--color-pink-600)]"
+		}
+	],
+	defaultVariants: {
+		color: "charcoal",
+		tone: "dark",
+		glow: false
+	}
+});
+/**
+* A color-customizable badge. Pick a `color` and `tone`; optionally enable the
+* AI `glow`. To render an existing tag, pass its stored hex via `legacyColor`.
+* Icons (e.g. a leading `<Sparkles />` or a trailing close `<X />`) are composed
+* as children, exactly like `Badge`.
+*/
+const ColorfulBadge = React.forwardRef(({ color, tone, glow, legacyColor, className, ...props }, ref) => {
+	const resolved = legacyColor ? resolveTagColor(legacyColor) : {
+		color,
+		tone
+	};
+	return /* @__PURE__ */ jsx(Badge, {
+		ref,
+		"data-slot": "colorful-badge",
+		size: "lg",
+		className: cn(colorfulBadgeVariants({
+			color: resolved.color,
+			tone: resolved.tone,
+			glow
+		}), className),
+		...props
+	});
+});
+ColorfulBadge.displayName = "ColorfulBadge";
+/**
+* Trailing remove affordance for a removable `ColorfulBadge`. Inspired by the
+* ds `ComboboxChip` remove button: a ghost icon button that inherits the
+* badge's text color and brightens on hover. Pass an `aria-label` and an
+* `onClick`. Compose it as the last child of a `ColorfulBadge`.
+*/
+const ColorfulBadgeRemove = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"data-slot": "colorful-badge-remove",
+		className: cn("-mr-1.5 size-5 rounded-full text-inherit opacity-70 hover:bg-transparent! hover:text-inherit! hover:opacity-100!", className),
+		...props,
+		children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none size-3.5" })
+	});
+});
+ColorfulBadgeRemove.displayName = "ColorfulBadgeRemove";
+const LEGACY_TAG_COLOR_MAP = {
+	"#003d4b": {
+		color: "charcoal",
+		tone: "dark"
+	},
+	"#bb2001": {
+		color: "red",
+		tone: "dark"
+	},
+	"#f92c00": {
+		color: "red",
+		tone: "medium-dark"
+	},
+	"#0761b5": {
+		color: "blue",
+		tone: "dark"
+	},
+	"#008f6c": {
+		color: "green",
+		tone: "medium-dark"
+	},
+	"#b285d1": {
+		color: "purple",
+		tone: "medium-light"
+	},
+	"#fcbb26": {
+		color: "yellow",
+		tone: "medium-light"
+	},
+	"#fe9d88": {
+		color: "red",
+		tone: "light"
+	},
+	"#ff844c": {
+		color: "red",
+		tone: "medium-light"
+	},
+	"#abccf2": {
+		color: "blue",
+		tone: "light"
+	},
+	"#49a0ff": {
+		color: "blue",
+		tone: "medium-light"
+	},
+	"#66d188": {
+		color: "green",
+		tone: "medium-light"
+	},
+	"#2ac8ff": {
+		color: "blue",
+		tone: "medium-dark"
+	}
+};
+/** Charcoal/dark — used when a stored hex is outside the known legacy palette. */
+const FALLBACK_TAG_COLOR = {
+	color: "charcoal",
+	tone: "dark"
+};
+/** Resolve a legacy hard-coded tag hex to `color` + `tone`; unknown → charcoal/dark. */
+function resolveTagColor(hex) {
+	return LEGACY_TAG_COLOR_MAP[hex.trim().toLowerCase()] ?? FALLBACK_TAG_COLOR;
+}
+
 //#endregion
 //#region src/components/dashboard-sidebar.tsx
 function DashboardSidebarProvider({ className, style, ...props }) {
@@ -522,4 +841,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DeprecatedBadge, NewBadge, ProfessionalBadge, RoleBadge, TrialBadge, useCopyToClipboard, useSidebar as useDashboardSidebar };
+export { BetaBadge, ColorfulBadge, ColorfulBadgeRemove, 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, DeprecatedBadge, NewBadge, ProfessionalBadge, RoleBadge, TrialBadge, colorfulBadgeVariants, useCopyToClipboard, useSidebar as useDashboardSidebar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -29,6 +29,7 @@
     "@aircall/hooks": "*",
     "@aircall/react-icons": "*",
     "@base-ui/react": "*",
+    "class-variance-authority": "*",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@aircall/react-icons": "*",
     "@base-ui/react": "1.3.0",
+    "class-variance-authority": "0.7.1",
     "@aircall/tsconfig": "1.4.3",
     "@chromatic-com/storybook": "5.0.2",
     "@faker-js/faker": "10.2.0",
@@ -65,7 +67,7 @@
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.17",
-    "@aircall/ds": "0.9.0",
+    "@aircall/ds": "0.9.1",
     "@aircall/hooks": "0.5.1"
   },
   "scripts": {