spb/polyllm

1"use client";2import * as React from "react";3import * as DialogPrimitive from "@radix-ui/react-dialog";4import { X } from "lucide-react";5import { cn } from "@/lib/utils";67export const Dialog = DialogPrimitive.Root;8export const DialogTrigger = DialogPrimitive.Trigger;9export const DialogClose = DialogPrimitive.Close;10export const DialogPortal = DialogPrimitive.Portal;1112export const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(function DialogOverlay({ className, ...props }, ref) {13  return <DialogPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] animate-fade-in", className)} {...props} />;14});1516export const DialogContent = React.forwardRef<17  React.ElementRef<typeof DialogPrimitive.Content>,18  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideClose?: boolean; size?: "sm" | "md" | "lg" | "xl" | "full" }19>(function DialogContent({ className, children, hideClose, size = "md", ...props }, ref) {20  const sizes = { sm: "sm:max-w-sm", md: "sm:max-w-lg", lg: "sm:max-w-2xl", xl: "sm:max-w-4xl", full: "sm:max-w-[min(96vw,1200px)]" };21  return (22    <DialogPortal>23      <DialogOverlay />24      <DialogPrimitive.Content25        ref={ref}26        className={cn(27          "fixed z-50 flex flex-col bg-bg-elevated border border-border shadow-lg focus:outline-none",28          // mobile: bottom sheet; desktop: centered29          "inset-x-0 bottom-0 max-h-[92dvh] rounded-t-2xl animate-fade-up",30          "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:max-h-[85vh] sm:animate-scale-in",31          sizes[size],32          className,33        )}34        {...props}35      >36        {children}37        {!hideClose ? (38          <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1.5 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg" aria-label="Close">39            <X className="size-4" />40          </DialogPrimitive.Close>41        ) : null}42      </DialogPrimitive.Content>43    </DialogPortal>44  );45});4647export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {48  return <div className={cn("flex flex-col gap-1 px-5 pt-5 pb-3", className)} {...props} />;49}50export function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {51  return <div className={cn("min-h-0 flex-1 overflow-y-auto px-5 pb-5 scrollbar-thin", className)} {...props} />;52}53export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {54  return <div className={cn("flex flex-col-reverse gap-2 border-t border-border px-5 py-3 sm:flex-row sm:justify-end", className)} {...props} />;55}56export const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(function DialogTitle({ className, ...props }, ref) {57  return <DialogPrimitive.Title ref={ref} className={cn("text-base font-semibold leading-6 tracking-tight", className)} {...props} />;58});59export const DialogDescription = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(function DialogDescription({ className, ...props }, ref) {60  return <DialogPrimitive.Description ref={ref} className={cn("text-sm text-fg-muted", className)} {...props} />;61});62