"use client"; import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; import type { HTMLAttributes, ReactNode } from "react"; export type SplitAction = { id: string; label: string; description?: string; disabled?: boolean; destructive?: boolean; onSelect?: () => void; }; export type SplitActionButtonProps = Omit, "onSelect"> & { label: string; actions: SplitAction[]; onAction?: () => void; /** Called with the id of the chosen secondary action. */ onActionSelect?: (id: string) => void; /** Accessible name of the menu trigger. */ menuLabel?: string; icon?: ReactNode; disabled?: boolean; variant?: "primary" | "secondary"; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; }; const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4B8E] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8DB2E6] dark:focus-visible:ring-offset-[#0F1620]"; const tones = { primary: "bg-[#1F4B8E] text-white hover:bg-[#193F79] disabled:bg-[#8FA5C6] dark:bg-[#8DB2E6] dark:text-[#0F1620] dark:hover:bg-[#A5C3EC] dark:disabled:bg-[#3A4A60] dark:disabled:text-[#9AA7B5]", secondary: "border border-[#D7DDE3] bg-white text-[#18212B] hover:bg-[#F4F6F8] disabled:text-[#8C96A3] dark:border-[#2A3646] dark:bg-[#151E2A] dark:text-[#E9EEF3] dark:hover:bg-[#1C2735]", }; export function SplitActionButton({ label, actions, onAction, onActionSelect, menuLabel = "More options", icon, disabled = false, variant = "primary", open, defaultOpen, onOpenChange, className = "", ...props }: SplitActionButtonProps) { const tone = tones[variant]; const divider = variant === "primary" ? "border-l border-white/25 dark:border-[#0F1620]/25" : ""; return (

{actions.map((action) => ( { action.onSelect?.(); onActionSelect?.(action.id); }} className="flex cursor-default flex-col gap-0.5 rounded-md px-3 py-2 text-sm outline-none data-[disabled]:opacity-50 data-[highlighted]:bg-[#EEF1F4] dark:data-[highlighted]:bg-[#1C2735]" > {action.label} {action.description ? {action.description} : null} ))}

); }