spb/agent-os

1'use client';2import * as React from 'react';3import * as M from '@radix-ui/react-dropdown-menu';4import { cn } from '@/lib/cn';56const content = 'anim-fade z-[70] min-w-44 rounded-md border border-line-2 bg-elevated p-1 text-[13px] text-text shadow-pop';7const item =8  'flex h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 outline-none data-[highlighted]:bg-hover data-[disabled]:opacity-40 pointer-coarse:h-11 pointer-coarse:text-sm';910export const DropdownMenu = M.Root;11export const DropdownMenuTrigger = M.Trigger;12export function DropdownMenuContent({ className, align = 'end', ...props }: React.ComponentProps<typeof M.Content>) {13  return (14    <M.Portal>15      <M.Content align={align} sideOffset={6} collisionPadding={8} className={cn(content, className)} {...props} />16    </M.Portal>17  );18}19export function DropdownMenuItem({ className, danger, ...props }: React.ComponentProps<typeof M.Item> & { danger?: boolean }) {20  return <M.Item className={cn(item, danger && 'text-error', className)} {...props} />;21}22export function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof M.Label>) {23  return <M.Label className={cn('px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted', className)} {...props} />;24}25export function DropdownMenuSeparator() {26  return <M.Separator className="my-1 h-px bg-line-2" />;27}28