| 41 | >; |
| 42 | |
| 43 | export const SheetContent = <T extends ValidComponent = "div">( |
| 44 | props: PolymorphicProps<T, sheetContentProps<T>>, |
| 45 | ) => { |
| 46 | const merge = mergeProps<sheetContentProps<T>[]>({ side: "right" }, props); |
| 47 | const [local, rest] = splitProps(merge as sheetContentProps, [ |
| 48 | "class", |
| 49 | "children", |
| 50 | "side", |
| 51 | ]); |
| 52 | |
| 53 | return ( |
| 54 | <DialogPrimitive.Portal> |
| 55 | <DialogPrimitive.Overlay |
| 56 | class={cn( |
| 57 | "fixed inset-0 z-50 bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0", |
| 58 | )} |
| 59 | /> |
| 60 | <DialogPrimitive.Content |
| 61 | class={sheetVariants({ side: local.side, class: local.class })} |
| 62 | {...rest} |
| 63 | > |
| 64 | {local.children} |
| 65 | <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-[opacity,box-shadow] hover:opacity-100 focus:outline-none focus:ring-[1.5px] focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"> |
| 66 | <svg |
| 67 | xmlns="http://www.w3.org/2000/svg" |
| 68 | viewBox="0 0 24 24" |
| 69 | class="h-4 w-4" |
| 70 | > |
| 71 | <path |
| 72 | fill="none" |
| 73 | stroke="currentColor" |
| 74 | strokeLinecap="round" |
| 75 | strokeLinejoin="round" |
| 76 | strokeWidth="2" |
| 77 | d="M18 6L6 18M6 6l12 12" |
| 78 | /> |
| 79 | <title>Close</title> |
| 80 | </svg> |
| 81 | </DialogPrimitive.CloseButton> |
| 82 | </DialogPrimitive.Content> |
| 83 | </DialogPrimitive.Portal> |
| 84 | ); |
| 85 | }; |
| 86 | |
| 87 | type sheetTitleProps<T extends ValidComponent = "h2"> = DialogTitleProps<T> & { |
| 88 | class?: string; |