"use client"; import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";import { XIcon } from "lucide-react";import type { CSSProperties } from "react";import { cn } from "~/lib/utils";import { Button } from "~/components/ui/button";import { ScrollArea } from "~/components/ui/scroll-area"; const Sheet = SheetPrimitive.Root; const SheetPortal = SheetPrimitive.Portal; function SheetTrigger(props: SheetPrimitive.Trigger.Props) {  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;} function SheetClose(props: SheetPrimitive.Close.Props) {  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;} function SheetBackdrop({ className, ...props }: SheetPrimitive.Backdrop.Props) {  return (    <SheetPrimitive.Backdrop      className={cn(        "fixed inset-0 z-50 bg-background/60 backdrop-blur-xs transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",        className,      )}      data-slot="sheet-backdrop"      {...props}    />  );} function SheetViewport({  className,  side,  variant = "default",  ...props}: SheetPrimitive.Viewport.Props & {  side?: "right" | "left" | "top" | "bottom";  variant?: "default" | "inset";}) {  return (    <SheetPrimitive.Viewport      className={cn(        "fixed inset-0 z-50 grid",        side === "bottom" && "grid grid-rows-[1fr_auto] pt-12",        side === "top" && "grid grid-rows-[auto_1fr] pb-12",        side === "left" && "flex justify-start",        side === "right" && "flex justify-end",        variant === "inset" && "sm:p-4",        className,      )}      data-slot="sheet-viewport"      {...props}    />  );} function SheetPopup({  className,  children,  showCloseButton = true,  keepMounted = false,  transitionDurationMs,  backdropClassName,  viewportClassName,  side = "right",  variant = "default",  style,  ...props}: SheetPrimitive.Popup.Props & {  showCloseButton?: boolean;  keepMounted?: boolean;  transitionDurationMs?: number;  backdropClassName?: string;  viewportClassName?: string;  side?: "right" | "left" | "top" | "bottom";  variant?: "default" | "inset";}) {  const transitionStyle =    transitionDurationMs === undefined      ? undefined      : ({ transitionDuration: `${transitionDurationMs}ms` } satisfies CSSProperties);  const instant = transitionDurationMs === 0;   return (    <SheetPortal keepMounted={keepMounted}>      <SheetBackdrop        className={cn(          instant &&            "transition-none! data-ending-style:opacity-100! data-starting-style:opacity-100!",          backdropClassName,        )}        style={transitionStyle}      />      <SheetViewport className={viewportClassName} side={side} variant={variant}>        <SheetPrimitive.Popup          className={cn(            "relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",            side === "bottom" &&              "row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8",            side === "top" &&              "data-ending-style:-translate-y-8 data-starting-style:-translate-y-8 border-b",            side === "left" &&              "data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 w-[calc(100%-(--spacing(12)))] max-w-md border-e",            side === "right" &&              "col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8",            variant === "inset" &&              "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]",            instant &&              "transition-none! will-change-auto! data-ending-style:translate-x-0! data-starting-style:translate-x-0! data-ending-style:translate-y-0! data-starting-style:translate-y-0! data-ending-style:opacity-100! data-starting-style:opacity-100!",            className,          )}          data-slot="sheet-popup"          style={{ ...transitionStyle, ...style }}          {...props}        >          {children}          {showCloseButton && (            <SheetPrimitive.Close              aria-label="Close"              className="absolute end-2 top-2"              render={<Button size="icon" variant="ghost" />}            >              <XIcon />            </SheetPrimitive.Close>          )}        </SheetPrimitive.Popup>      </SheetViewport>    </SheetPortal>  );} function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      className={cn(        "flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4",        className,      )}      data-slot="sheet-header"      {...props}    />  );} function SheetFooter({  className,  variant = "default",  ...props}: React.ComponentProps<"div"> & {  variant?: "default" | "bare";}) {  return (    <div      className={cn(        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end",        variant === "default" && "border-t bg-muted/72 py-4",        variant === "bare" &&          "in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6",        className,      )}      data-slot="sheet-footer"      {...props}    />  );} function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {  return (    <SheetPrimitive.Title      className={cn("font-heading font-semibold text-xl leading-none", className)}      data-slot="sheet-title"      {...props}    />  );} function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {  return (    <SheetPrimitive.Description      className={cn("text-muted-foreground text-sm", className)}      data-slot="sheet-description"      {...props}    />  );} function SheetPanel({  className,  scrollFade = true,  ...props}: React.ComponentProps<"div"> & { scrollFade?: boolean }) {  return (    <ScrollArea scrollFade={scrollFade}>      <div        className={cn(          "p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1",          className,        )}        data-slot="sheet-panel"        {...props}      />    </ScrollArea>  );} export {  Sheet,  SheetTrigger,  SheetPortal,  SheetClose,  SheetBackdrop,  SheetBackdrop as SheetOverlay,  SheetPopup,  SheetPopup as SheetContent,  SheetHeader,  SheetFooter,  SheetTitle,  SheetDescription,  SheetPanel,};