@aircall/blocks 0.2.1

package/dist/index.js

@@ -0,0 +1,525 @@
+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 { useCallbackRef, useIsMounted, useUnmount } from "@aircall/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/hooks/use-copy-to-clipboard.ts
+function useCopyToClipboard(value, { timeout = 5e3, onCopied } = {}) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef();
+	const getIsMounted = useIsMounted();
+	const onCopiedRef = useCallbackRef(onCopied);
+	useUnmount(() => clearTimeout(timerRef.current));
+	useEffect(() => {
+		clearTimeout(timerRef.current);
+		setCopied(false);
+	}, [value]);
+	return {
+		copy: useCallback(async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				if (!getIsMounted()) return;
+				setCopied(true);
+				onCopiedRef();
+				clearTimeout(timerRef.current);
+				timerRef.current = setTimeout(() => {
+					if (getIsMounted()) setCopied(false);
+				}, timeout);
+			} catch {}
+		}, [
+			value,
+			timeout,
+			getIsMounted,
+			onCopiedRef
+		]),
+		copied
+	};
+}
+
+//#endregion
+//#region src/components/copy-button.tsx
+const CopyButtonContext = createContext(null);
+function useCopyButtonContext() {
+	const ctx = useContext(CopyButtonContext);
+	if (ctx === null) throw new Error("CopyButtonIcon and CopyButtonLabel must be rendered inside a CopyButton.");
+	return ctx;
+}
+function CopyButton({ value, timeout, onCopied, variant = "outline", children, ...buttonProps }) {
+	const { copy, copied } = useCopyToClipboard(value, {
+		timeout,
+		onCopied
+	});
+	return /* @__PURE__ */ jsx(CopyButtonContext.Provider, {
+		value: { copied },
+		children: /* @__PURE__ */ jsx(Button, {
+			onClick: () => {
+				copy();
+			},
+			variant,
+			...buttonProps,
+			children
+		})
+	});
+}
+function CopyButtonIcon({ className }) {
+	const { copied } = useCopyButtonContext();
+	return /* @__PURE__ */ jsx(copied ? Check : Copy, { className });
+}
+function CopyButtonLabel({ label = "Copy", copiedLabel = "Copied", className }) {
+	const { copied } = useCopyButtonContext();
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		children: copied ? copiedLabel : label
+	});
+}
+
+//#endregion
+//#region src/components/dashboard-page.tsx
+function DashboardPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-page",
+		className: cn("flex flex-col h-screen bg-page-background p-2 gap-2", className),
+		...props
+	});
+}
+function DashboardPageBanner({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-page-banner",
+		className: cn("-mt-2 -mx-2", className),
+		...props
+	});
+}
+function DashboardPageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-page-content",
+		className: cn("flex-1 min-w-0 flex flex-col bg-background rounded-xl border border-border overflow-hidden", "[&:has([data-slot=dph-tabs])>[data-slot=dph]]:border-b-0", 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),
+		...props
+	});
+}
+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)
+	});
+}
+
+//#endregion
+//#region src/components/dashboard-page-header.tsx
+function DashboardPageHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dph",
+		className: cn("@container bg-background border-b border-border w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "dph-grid",
+			className: "group/dph pl-4 pr-6 py-3",
+			children
+		})
+	});
+}
+function DashboardPageHeaderNav({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dph-nav",
+		className: cn("[grid-area:nav] flex items-center gap-1", className),
+		...props,
+		children
+	});
+}
+function DashboardPageHeaderNavBack({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		nativeButton: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), children]
+	});
+}
+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),
+		...props,
+		children
+	});
+}
+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),
+		...props,
+		children
+	});
+}
+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),
+		...props,
+		children
+	});
+}
+function DashboardPageHeaderSubtitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dph-subtitle",
+		className: cn("flex flex-col items-start gap-0.5 max-w-xl", className),
+		...props,
+		children
+	});
+}
+function DashboardPageHeaderDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dph-description",
+		className: cn("text-sm text-muted-foreground line-clamp-3 -mt-1", className),
+		...props,
+		children
+	});
+}
+function DashboardPageHeaderActions({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dph-actions",
+		className: cn("[grid-area:actions] flex items-center gap-2 self-start pl-2", className),
+		...props,
+		children
+	});
+}
+const DashboardPageHeaderAction = React.forwardRef(({ size = "lg", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
+	ref,
+	size,
+	...props
+}));
+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 }) {
+		return /* @__PURE__ */ jsx(Badge, {
+			"data-slot": slot,
+			className: cn("border-transparent text-foreground", className),
+			style: badgeBg(color),
+			...props,
+			children: label
+		});
+	}
+	GradientBadge.displayName = label.replace(/\s+/g, "") + "Badge";
+	return GradientBadge;
+}
+/** Blue pill — feature in beta, not yet GA */
+const BetaBadge = createGradientBadge("badge-beta", "var(--color-blue-300)", "Beta");
+/** Green pill — recently launched feature */
+const NewBadge = createGradientBadge("badge-new", "var(--color-green-300)", "New");
+/** Amber pill — feature being phased out */
+const DeprecatedBadge = createGradientBadge("badge-deprecated", "var(--color-yellow-300)", "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) */
+function ProfessionalBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "badge-professional",
+		className,
+		variant: "default",
+		...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"
+	}
+};
+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/dashboard-sidebar.tsx
+function DashboardSidebarProvider({ className, style, ...props }) {
+	return /* @__PURE__ */ jsx(SidebarProvider, {
+		className: cn("!min-h-0 !w-auto flex flex-1 min-h-0 gap-2", "[&>[data-slot=tabs]]:flex-1 [&>[data-slot=tabs]]:min-w-0 [&>[data-slot=tabs]]:min-h-0 [&>[data-slot=tabs]]:flex [&>[data-slot=tabs]]:flex-col", className),
+		style: {
+			"--sidebar-width": "14rem",
+			"--sidebar-width-icon": "3rem",
+			...style
+		},
+		...props
+	});
+}
+function DashboardSidebar({ className, children, ...props }) {
+	const { state } = useSidebar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? "icon" : "",
+		className: cn("group/dbs flex flex-col h-full overflow-hidden", "w-(--sidebar-width) transition-[width] duration-200 ease-linear", "data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+		...props,
+		children
+	});
+}
+function DashboardSidebarHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-header",
+		className: cn("flex items-start gap-0 p-1 rounded-md shrink-0 justify-end w-full", "group-data-[collapsible=icon]/dbs:justify-center", className),
+		...props,
+		children
+	});
+}
+function DashboardSidebarTrigger({ className, onClick, ...props }) {
+	const { toggleSidebar, state } = useSidebar();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "dashboard-sidebar-trigger",
+		variant: "ghost",
+		size: "icon",
+		className,
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		"aria-label": state === "expanded" ? "Collapse sidebar" : "Expand sidebar",
+		...props,
+		children: state === "expanded" ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" })
+	});
+}
+function DashboardSidebarContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-content",
+		className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden min-h-0", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className),
+		...props
+	});
+}
+function DashboardSidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-footer",
+		className: cn("bg-background/80 dark:bg-accent/50 rounded-xl p-1 flex flex-col shrink-0", "items-start w-full", "group-data-[collapsible=icon]/dbs:items-center group-data-[collapsible=icon]/dbs:w-auto", className),
+		...props
+	});
+}
+function DashboardSidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-group",
+		className: cn("flex flex-col gap-1 items-start p-1 w-full", className),
+		...props
+	});
+}
+function DashboardSidebarGroupLabel({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("truncate text-sm font-medium text-navbar-foreground opacity-90 px-2 py-1.5 rounded-md w-full", "group-data-[collapsible=icon]/dbs:hidden", className) }, props),
+		render,
+		state: { slot: "dashboard-sidebar-group-label" }
+	});
+}
+function DashboardSidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "dashboard-sidebar-menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		...props
+	});
+}
+function DashboardSidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "dashboard-sidebar-menu-item",
+		className: cn("relative list-none", 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"),
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1 min-w-0 flex items-center gap-2 truncate",
+			children
+		}),
+		action && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center justify-center size-4 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]/dbs:hidden",
+			children: action
+		})
+	] });
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			ref,
+			type: "button",
+			"data-active": isActive,
+			className: cn("peer/dbs-button relative flex w-full items-center gap-2 h-10 p-2 rounded-full overflow-hidden", "text-sm font-medium transition-[width,padding,color,background-color] duration-200 ease-linear", disabled ? "cursor-default" : "cursor-pointer hover:bg-sidebar-accent", "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50", disabled ? "text-muted-foreground" : "text-navbar-foreground", disabled && "opacity-60", isActive && "bg-navbar-accent text-navbar-accent-foreground hover:bg-navbar-accent", "aria-expanded:bg-navbar-accent aria-expanded:text-navbar-accent-foreground aria-expanded:hover:bg-navbar-accent", className),
+			children: buttonContent
+		}, props),
+		render,
+		state: {
+			slot: "dashboard-sidebar-menu-button",
+			active: isActive
+		}
+	});
+});
+DashboardSidebarMenuButton.displayName = "DashboardSidebarMenuButton";
+function DashboardSidebarMenuAddon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-menu-addon",
+		className: cn("ml-auto shrink-0 inline-flex items-center", className),
+		...props
+	});
+}
+function DashboardSidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CounterBadge, {
+		"data-slot": "dashboard-sidebar-menu-badge",
+		className: cn("pointer-events-none absolute select-none", "right-2 top-1/2 -translate-y-1/2", "group-data-[collapsible=icon]/dbs:right-[-2px] group-data-[collapsible=icon]/dbs:top-[-3.5px] group-data-[collapsible=icon]/dbs:translate-y-0", "peer-data-[active=true]/dbs-button:bg-navbar-icon-bg peer-data-[active=true]/dbs-button:text-navbar-foreground", className),
+		...props
+	});
+}
+function DashboardSidebarSubmenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-submenu",
+		className: cn("bg-popover border border-border shadow-md rounded-md p-1", "flex flex-col w-[238px]", className),
+		...props
+	});
+}
+function DashboardSidebarSubmenuItem({ className, render, isActive = false, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex items-center gap-2 p-2 rounded-md cursor-pointer", "text-sm text-foreground leading-snug", "hover:bg-accent transition-colors", isActive && "bg-accent font-medium", className) }, props),
+		render,
+		state: {
+			slot: "dashboard-sidebar-submenu-item",
+			active: isActive
+		}
+	});
+}
+function DashboardSidebarSubmenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-sidebar-submenu-separator",
+		className: cn("h-px bg-border -mx-1 my-1", className)
+	});
+}
+
+//#endregion
+//#region src/components/dashboard-sidebar-nav.tsx
+function SubmenuItems({ items, renderLink }) {
+	const sections = [];
+	let current = [];
+	let currentLabel;
+	const flush = () => {
+		if (current.length > 0) sections.push({
+			kind: "group",
+			label: currentLabel,
+			links: current
+		});
+		current = [];
+		currentLabel = void 0;
+	};
+	for (const item of items) if (item.kind === "separator") {
+		flush();
+		sections.push({ kind: "separator" });
+	} else if (item.kind === "label") {
+		flush();
+		currentLabel = item.label;
+	} else current.push(item);
+	flush();
+	const renderLink_ = (item, key) => {
+		const linkEl = item.href ? renderLink ? renderLink(item.href) : /* @__PURE__ */ jsx("a", { href: item.href }) : void 0;
+		return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			"data-active": item.isActive || void 0,
+			render: linkEl,
+			children: [item.label, item.badge && /* @__PURE__ */ jsx(DropdownMenuAddon, { children: item.badge })]
+		}, key);
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section, si) => {
+		if (section.kind === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, si);
+		if (section.label !== void 0) return /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: section.label }), section.links.map((item, ii) => renderLink_(item, `${si}-${ii}`))] }, si);
+		return section.links.map((item, ii) => renderLink_(item, `${si}-${ii}`));
+	}) });
+}
+function NavItem({ item, renderLink }) {
+	const trailing = item.badge ? /* @__PURE__ */ jsx(DashboardSidebarMenuAddon, { children: item.badge }) : null;
+	if (item.kind === "submenu" && !item.disabled) {
+		const chevron = item.action !== void 0 ? item.action : /* @__PURE__ */ jsx(ChevronRight, {});
+		return /* @__PURE__ */ jsx(DashboardSidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(DashboardSidebarMenuButton, {
+				icon: item.icon,
+				isActive: item.isActive,
+				action: chevron
+			}),
+			children: [item.label, trailing]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			side: "right",
+			sideOffset: 8,
+			align: "start",
+			className: "w-56",
+			children: /* @__PURE__ */ jsx(SubmenuItems, {
+				items: item.items,
+				renderLink
+			})
+		})] }) });
+	}
+	const action = item.kind === "submenu" ? item.action ?? null : item.action;
+	const hasCount = (item.kind === "link" || item.kind === "action") && item.count !== void 0;
+	const buttonEl = item.kind === "link" ? /* @__PURE__ */ jsx(DashboardSidebarMenuButton, {
+		icon: item.icon,
+		isActive: item.isActive,
+		disabled: item.disabled,
+		action,
+		render: item.disabled ? void 0 : renderLink ? renderLink(item.href) : /* @__PURE__ */ jsx("a", { href: item.href })
+	}) : /* @__PURE__ */ jsx(DashboardSidebarMenuButton, {
+		icon: item.icon,
+		isActive: item.isActive,
+		disabled: item.disabled,
+		action,
+		onClick: item.kind === "action" ? item.onClick : void 0
+	});
+	const countBadge = hasCount ? /* @__PURE__ */ jsx(DashboardSidebarMenuBadge, { children: item.count }) : null;
+	if (item.tooltip) return /* @__PURE__ */ jsxs(DashboardSidebarMenuItem, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+		render: buttonEl,
+		children: [item.label, trailing]
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		sideOffset: 8,
+		className: "max-w-64",
+		children: item.tooltip
+	})] }), countBadge] });
+	return /* @__PURE__ */ jsxs(DashboardSidebarMenuItem, { children: [React.cloneElement(buttonEl, {}, item.label, trailing), countBadge] });
+}
+function DashboardSidebarNav({ groups, renderLink }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsxs(DashboardSidebarGroup, { children: [group.label && /* @__PURE__ */ jsx(DashboardSidebarGroupLabel, { children: group.label }), /* @__PURE__ */ jsx(DashboardSidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(NavItem, {
+		item,
+		renderLink
+	}, item.id)) })] }, group.id)) });
+}
+
+//#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 };

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@aircall/blocks",
+  "version": "0.2.1",
+  "type": "module",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "description": "Aircall Blocks — higher-level UI compositions built on @aircall/ds",
+  "author": "Aircall",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./globals.css": "./dist/globals.css"
+  },
+  "peerDependencies": {
+    "@aircall/ds": "*",
+    "@aircall/hooks": "*",
+    "@aircall/react-icons": "*",
+    "@base-ui/react": "*",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@aircall/react-icons": "*",
+    "@base-ui/react": "1.3.0",
+    "@aircall/tsconfig": "1.4.3",
+    "@chromatic-com/storybook": "5.0.2",
+    "@faker-js/faker": "10.2.0",
+    "@storybook/addon-a11y": "10.3.3",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/addon-mcp": "0.4.2",
+    "@storybook/addon-themes": "10.3.3",
+    "@storybook/addon-vitest": "10.3.3",
+    "@storybook/react-vite": "10.3.3",
+    "@tailwindcss/cli": "4.1.18",
+    "@tailwindcss/postcss": "4.1.18",
+    "@types/node": "24",
+    "@types/react": "19",
+    "@types/react-dom": "19",
+    "@vitest/browser-playwright": "4.0.17",
+    "@vitest/coverage-v8": "4.0.17",
+    "chromatic": "13.3.5",
+    "playwright": "1.57.0",
+    "react": "19.2.3",
+    "react-compiler-runtime": "1.0.0",
+    "react-dom": "19.2.3",
+    "storybook": "10.3.3",
+    "storybook-addon-pseudo-states": "10.3.3",
+    "tailwindcss": "4.1.18",
+    "tsdown": "0.20.0-beta.3",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.17",
+    "@aircall/ds": "0.9.0",
+    "@aircall/hooks": "0.5.1"
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "build:js": "tsdown --config ./tsdown.config.ts",
+    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/globals.css --minify",
+    "build:package": "pnpm run build:js && pnpm run build:css",
+    "lint": "eslint . --max-warnings 0",
+    "sb:dev": "storybook dev -p 6009",
+    "sb:build": "storybook build",
+    "sb:build:chromatic": "storybook build --test --stats-json",
+    "sb:test": "vitest --project=storybook",
+    "chromatic": "chromatic --storybook-build-dir=./storybook-static"
+  },
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js"
+}