style: Fix missing folding animation for sheet component (#68) (#73)

* style: Fix missing folding animation for sheet component (#68)

* fix: missing modifications

apps/docs/src/registry/ui/sheet.tsx

@@ -42,7 +42,7 @@ const SheetOverlay: Component<SheetPrimitive.DialogOverlayProps> = (props) => {
   return (
     <SheetPrimitive.Overlay
       class={cn(
-        "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+        "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[closed=]:animate-out data-[closed=]:fade-out data-[expanded=]:fade-in",
         props.class
       )}
       {...rest}
@@ -51,14 +51,14 @@ const SheetOverlay: Component<SheetPrimitive.DialogOverlayProps> = (props) => {
 }
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[expanded=]:animate-in data-[closed=]:animate-out data-[closed=]:duration-300 data-[expanded=]:duration-500",
   {
     variants: {
       position: {
-        top: "w-full duration-300 animate-in slide-in-from-top",
-        bottom: "w-full duration-300 animate-in slide-in-from-bottom",
-        left: "h-full duration-300 animate-in slide-in-from-left",
-        right: "h-full duration-300 animate-in slide-in-from-right"
+        top: "inset-x-0 top-0 border-b data-[closed=]:slide-out-to-top data-[expanded=]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[closed=]:slide-out-to-bottom data-[expanded=]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[closed=]:slide-out-to-left data-[expanded]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[closed=]:slide-out-to-right data-[expanded=]:slide-in-from-right sm:max-w-sm"
       },
       size: {
         content: "",