@aircall/blocks 0.2.2 → 0.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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, X } from "@aircall/react-icons";
+import { Check, ChevronLeft, ChevronRight, Copy, PanelLeftClose, PanelLeftOpen } 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";
@@ -104,7 +104,7 @@ function DashboardPageContent({ className, ...props }) {
 function DashboardPageMain({ className, ...props }) {
 	return /* @__PURE__ */ jsx("main", {
 		"data-slot": "dashboard-page-main",
-		className: cn("flex-1 min-h-0 overflow-auto", className),
+		className: cn("flex-1 min-h-0 overflow-auto py-4 px-6", className),
 		...props
 	});
 }
@@ -112,7 +112,7 @@ function DashboardPageTabs({ className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsList, {
 		...props,
 		"data-slot": "dph-tabs",
-		className: cn("flex w-full justify-start gap-0 px-4 border-b border-border rounded-none bg-transparent", "[&>[data-slot=tabs-trigger]]:flex-none", "[&>[data-slot=tabs-trigger]]:rounded-none", "[&>[data-slot=tabs-trigger]]:after:hidden", "[&>[data-slot=tabs-trigger]]:border-b-2", "[&>[data-slot=tabs-trigger]]:border-b-transparent", "[&>[data-slot=tabs-trigger]]:-mb-px", "[&>[data-slot=tabs-trigger][data-active]]:border-b-foreground", className)
+		className: cn("flex w-full justify-start gap-0 px-6 border-b border-border rounded-none bg-transparent", "[&>[data-slot=tabs-trigger]]:flex-none", "[&>[data-slot=tabs-trigger]]:rounded-none", "[&>[data-slot=tabs-trigger]]:after:hidden", "[&>[data-slot=tabs-trigger]]:border-b-2", "[&>[data-slot=tabs-trigger]]:border-b-transparent", "[&>[data-slot=tabs-trigger]]:-mb-px", "[&>[data-slot=tabs-trigger][data-active]]:border-b-foreground", className)
 	});
 }
 
@@ -150,7 +150,7 @@ function DashboardPageHeaderNavBack({ children, ...props }) {
 function DashboardPageHeaderPrefix({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dph-prefix",
-		className: cn("[grid-area:prefix] flex shrink-0 pr-2 pt-2 items-center justify-center self-start", "group-has-[[data-slot=dph-nav]]/dph:pl-2", className),
+		className: cn("[grid-area:prefix] flex shrink-0 px-2 pt-2 items-center justify-center self-start", className),
 		...props,
 		children
 	});
@@ -158,7 +158,7 @@ function DashboardPageHeaderPrefix({ className, children, ...props }) {
 function DashboardPageHeaderTitleGroup({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dph-title-group",
-		className: cn("[grid-area:info] flex min-w-0 flex-col self-center", "group-has-[[data-slot=dph-nav]]/dph:pl-2", "group-has-[[data-slot=dph-prefix]]/dph:pl-0", className),
+		className: cn("[grid-area:info] flex min-w-0 flex-col self-center pl-2", "group-has-[[data-slot=dph-prefix]]/dph:pl-0", className),
 		...props,
 		children
 	});
@@ -166,7 +166,7 @@ function DashboardPageHeaderTitleGroup({ className, children, ...props }) {
 function DashboardPageHeaderTitle({ size = "lg", className, children, ...props }) {
 	return /* @__PURE__ */ jsx("h1", {
 		"data-slot": "dph-title",
-		className: cn("[grid-area:info] self-center group-has-[[data-slot=dph-nav]]/dph:pl-2 group-has-[[data-slot=dph-prefix]]/dph:pl-0", "[[data-slot=dph-title-group]_&]:p-0", "[[data-slot=dph-title-group]_&]:self-auto", "truncate text-foreground", size === "lg" ? "text-3xl font-bold" : "text-xl font-bold", "leading-10", className),
+		className: cn("[grid-area:info] self-center pl-2 group-has-[[data-slot=dph-prefix]]/dph:pl-0", "[[data-slot=dph-title-group]_&]:p-0", "[[data-slot=dph-title-group]_&]:self-auto", "truncate text-foreground", size === "lg" ? "text-3xl font-bold" : "text-xl font-bold", "leading-10", className),
 		...props,
 		children
 	});
@@ -204,385 +204,69 @@ DashboardPageHeaderAction.displayName = "DashboardPageHeaderAction";
 
 //#endregion
 //#region src/components/product-badges.tsx
-function badgeBg(color) {
-	return { backgroundImage: [`linear-gradient(90deg, var(--badge-overlay) 0%, var(--badge-overlay) 100%)`, `linear-gradient(90deg, ${color} 0%, ${color} 100%)`].join(", ") };
-}
-function createGradientBadge(slot, color, label) {
-	function GradientBadge({ className, ...props }) {
+const GRADIENT_BASE = cn("border-transparent text-foreground", "bg-[image:linear-gradient(90deg,var(--badge-overlay),var(--badge-overlay)),linear-gradient(90deg,var(--badge-accent),var(--badge-accent))]");
+const productBadgeVariants = cva(GRADIENT_BASE, { variants: { type: {
+	beta: "[--badge-accent:var(--color-blue-300)]",
+	new: "[--badge-accent:var(--color-green-300)]",
+	deprecated: "[--badge-accent:var(--color-yellow-300)]",
+	trial: "[--badge-accent:var(--color-blue-300)]"
+} } });
+const PRODUCT_BADGE_LABEL = {
+	beta: "Beta",
+	new: "New",
+	deprecated: "Deprecated",
+	trial: "Trial"
+};
+function createProductBadge(type) {
+	const label = PRODUCT_BADGE_LABEL[type];
+	function ProductBadge({ className, ...props }) {
 		return /* @__PURE__ */ jsx(Badge, {
-			"data-slot": slot,
-			className: cn("border-transparent text-foreground", className),
-			style: badgeBg(color),
+			"data-slot": `badge-${type}`,
+			className: cn(productBadgeVariants({ type }), className),
 			...props,
 			children: label
 		});
 	}
-	GradientBadge.displayName = label.replace(/\s+/g, "") + "Badge";
-	return GradientBadge;
+	ProductBadge.displayName = label.replace(/\s+/g, "") + "Badge";
+	return ProductBadge;
 }
 /** Blue pill — feature in beta, not yet GA */
-const BetaBadge = createGradientBadge("badge-beta", "var(--color-blue-300)", "Beta");
+const BetaBadge = createProductBadge("beta");
 /** Green pill — recently launched feature */
-const NewBadge = createGradientBadge("badge-new", "var(--color-green-300)", "New");
+const NewBadge = createProductBadge("new");
 /** Amber pill — feature being phased out */
-const DeprecatedBadge = createGradientBadge("badge-deprecated", "var(--color-yellow-300)", "Deprecated");
+const DeprecatedBadge = createProductBadge("deprecated");
 /** Blue pill — user is in a trial period (same blue family as Beta) */
-const TrialBadge = createGradientBadge("badge-trial", "var(--color-blue-300)", "Trial");
-/** Green pill — Professional tier (no gradient; uses default Badge variant) */
+const TrialBadge = createProductBadge("trial");
+/** Charcoal pill — Professional tier (no gradient; solid secondary Badge) */
 function ProfessionalBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Badge, {
 		"data-slot": "badge-professional",
-		className,
-		variant: "default",
+		tone: "dark",
+		color: "charcoal",
 		...props,
 		children: "Professional"
 	});
 }
-const ROLE_CONFIG = {
-	agent: {
-		color: "var(--color-yellow-400)",
-		label: "Agent"
-	},
-	supervisor: {
-		color: "var(--color-blue-500)",
-		label: "Supervisor"
-	},
-	admin: {
-		color: "var(--color-purple-500)",
-		label: "Admin"
-	},
-	owner: {
-		color: "var(--color-green-400)",
-		label: "Owner"
-	}
+const roleBadgeVariants = cva(GRADIENT_BASE, { variants: { role: {
+	agent: "[--badge-accent:var(--color-yellow-400)]",
+	supervisor: "[--badge-accent:var(--color-blue-500)]",
+	admin: "[--badge-accent:var(--color-purple-500)]",
+	owner: "[--badge-accent:var(--color-green-400)]"
+} } });
+const ROLE_BADGE_LABEL = {
+	agent: "Agent",
+	supervisor: "Supervisor",
+	admin: "Admin",
+	owner: "Owner"
 };
 function RoleBadge({ role, className, ...props }) {
-	const { color, label } = ROLE_CONFIG[role];
 	return /* @__PURE__ */ jsx(Badge, {
 		"data-slot": `badge-${role}`,
-		className: cn("border-transparent text-foreground", className),
-		style: badgeBg(color),
-		...props,
-		children: label
-	});
-}
-
-//#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),
+		className: cn(roleBadgeVariants({ role }), className),
 		...props,
-		children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none size-3.5" })
+		children: ROLE_BADGE_LABEL[role]
 	});
-});
-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
@@ -679,7 +363,7 @@ function DashboardSidebarMenuItem({ className, ...props }) {
 const DashboardSidebarMenuButton = React.forwardRef(function DashboardSidebarMenuButton({ className, render, isActive = false, disabled = false, icon, action, children, ...props }, ref) {
 	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
-			className: cn("size-6 rounded-full bg-navbar-icon-bg text-navbar-foreground flex items-center justify-center shrink-0 overflow-hidden", "[&>svg]:size-4 [&>svg]:shrink-0"),
+			className: cn("size-6 rounded-full bg-background text-foreground flex items-center justify-center shrink-0 overflow-hidden", "[&>svg]:size-4 [&>svg]:shrink-0"),
 			children: icon
 		}),
 		/* @__PURE__ */ jsx("span", {
@@ -841,4 +525,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -67,7 +67,7 @@
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.17",
-    "@aircall/ds": "0.9.1",
+    "@aircall/ds": "0.10.0",
     "@aircall/hooks": "0.5.1"
   },
   "scripts": {