"use client"; import { useMemo } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Drawer, DrawerClose, DrawerContent, } from "@/components/registry/primitives/core/drawer"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/registry/primitives/core/dropdown-menu"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/registry/primitives/core/tooltip"; import { TypographySmall } from "@/components/registry/primitives/core/typography"; import { cn } from "@/lib/registry/cn"; export interface ActionBarButton { label: string; icon?: string; onClick?: () => void; variant?: "default" | "outline" | "ghost"; colorScheme?: "primary" | "neutral" | "success" | "destructive"; ariaLabel?: string; } export interface ActionBarMenuItem { label: string; icon?: string; onClick?: () => void; variant?: "default" | "destructive"; } export interface ActionBarProps { /** Primary actions shown as buttons (and in overflow menu on small screens). */ actions?: { buttons?: ActionBarButton[]; menuItems?: ActionBarMenuItem[]; }; displayOptions?: { selectedCount?: number; /** "fixed" = bottom drawer with overlay and native close; "static" = inline bar, no overlay. */ position?: "fixed" | "static"; align?: "left" | "center" | "right"; }; behaviorOptions?: { /** Controlled open state. When using position="fixed", the Drawer uses this. */ isOpen?: boolean; /** Called when the bar should open or close (e.g. close button, escape, overlay click). */ onOpenChange?: (open: boolean) => void; /** Called when the user cancels or closes the bar. */ onCancel?: () => void; }; styleOptions?: { className?: string; }; } const DEFAULT_BUTTONS: ActionBarButton[] = [ { label: "Publish", icon: "upload", variant: "outline", colorScheme: "neutral", }, { label: "Unpublish", icon: "cloud", variant: "outline", colorScheme: "neutral", }, { label: "Duplicate", icon: "clipboard", variant: "default", colorScheme: "primary", }, ]; const DEFAULT_MENU_ITEMS: ActionBarMenuItem[] = [ { label: "Archive", icon: "archive", variant: "default" }, { label: "Delete", icon: "trash", variant: "destructive" }, ]; /** Overflow dropdown: mobile-only action buttons plus the menu items. */ function OverflowMenu({ overflowButtons, menuItems, }: { overflowButtons: ActionBarButton[]; menuItems: ActionBarMenuItem[]; }) { return ( More {overflowButtons.map((button) => ( {button.icon && ( )} {button.label} ))} {overflowButtons.length > 0 && menuItems.length > 0 ? ( ) : null} {menuItems.map((item) => ( {item.icon && ( )} {item.label} ))} ); } export function ActionBar({ actions, displayOptions, behaviorOptions, styleOptions, }: ActionBarProps) { const isOpen = behaviorOptions?.isOpen ?? false; const resolvedOnOpenChange = behaviorOptions?.onOpenChange; const resolvedSelectedCount = displayOptions?.selectedCount ?? 0; const resolvedOnCancel = behaviorOptions?.onCancel; const resolvedButtons = actions?.buttons ?? DEFAULT_BUTTONS; const resolvedMenuItems = actions?.menuItems ?? DEFAULT_MENU_ITEMS; const className = styleOptions?.className; const align = displayOptions?.align ?? "center"; const resolvedPosition = displayOptions?.position ?? "fixed"; const handleCancel = () => { resolvedOnOpenChange?.(false); resolvedOnCancel?.(); }; const alignClasses = { left: "ms-4", center: "mx-auto", right: "me-4 ms-auto", }; const buttonList = resolvedButtons ?? []; const { primaryButton, overflowButtons } = useMemo(() => { const list = resolvedButtons ?? []; const primary = list.find((button) => button.variant === "default") ?? list[0]; const overflow = list.filter((button) => button !== primary); return { primaryButton: primary, overflowButtons: overflow, }; }, [resolvedButtons]); const barContent = (

{resolvedPosition === "fixed" ? ( ) : ( )} Cancel {resolvedSelectedCount} selected

{/* Desktop: all action buttons visible */}

{buttonList.map((button) => ( ))}

{/* Mobile: only primary button visible */}

{primaryButton && ( )}

{/* More menu */} {((resolvedMenuItems?.length ?? 0) > 0 || overflowButtons.length > 0) && ( )}

); if (resolvedPosition === "fixed") { return ( div.bg-muted]:hidden", className, )} > {barContent} ); } return

{barContent}

; }

Action Bar

Showcase

Action Bar